プレビュー
HTML
<ol>
<li>Collect</li>
<li>Compose</li>
<li>Ship</li>
</ol>
CSS
:root {
--ink: #2a1610;
--paper: #f8efe6;
--accent: #b54a24;
--accent-2: #3d4a5c;
--on-accent: #fff6ee;
--muted: #7a5c50;
--line: #e0c8b6;
--chip: #f0ddd0;
}
ol {
margin: 0;
padding: 0;
color: var(--ink);
font-family: Palatino, Georgia, serif;
list-style: none;
counter-reset: step;
}
li {
display: grid;
grid-template-columns: 2rem 1fr;
gap: 0.6rem;
align-items: baseline;
padding-block: 0.45rem;
border-top: 1px solid var(--line);
counter-increment: step;
}
li::before {
content: counter(step);
color: var(--accent);
font-size: 1.3rem;
font-weight: 700;
}
Tailwind
<style>
:root {
--ink: #2a1610;
--paper: #f8efe6;
--accent: #b54a24;
--accent-2: #3d4a5c;
--on-accent: #fff6ee;
--muted: #7a5c50;
--line: #e0c8b6;
--chip: #f0ddd0;
}
ol {
counter-reset: step;
}
li {
counter-increment: step;
}
li::before {
content: counter(step);
color: var(--accent);
font-size: 1.3rem;
font-weight: 700;
}
</style>
<ol class="m-0 p-0 text-[var(--ink)] font-[Palatino,_Georgia,_serif] list-none">
<li class="grid [grid-template-columns:2rem_1fr] gap-[0.6rem] [align-items:baseline] py-[0.45rem] [border-top:1px_solid_var(--line)]">Collect</li>
<li class="grid [grid-template-columns:2rem_1fr] gap-[0.6rem] [align-items:baseline] py-[0.45rem] [border-top:1px_solid_var(--line)]">Compose</li>
<li class="grid [grid-template-columns:2rem_1fr] gap-[0.6rem] [align-items:baseline] py-[0.45rem] [border-top:1px_solid_var(--line)]">Ship</li>
</ol>