プレビュー
HTML
<article>
<p><b>24</b> <small>yen</small></p>
<h2>Per set</h2>
</article>
CSS
:root {
--ink: #1e2a1c;
--paper: #f3f6ee;
--accent: #3f6b3a;
--accent-2: #8a6a32;
--on-accent: #f5f8ef;
--muted: #66725f;
--line: #c9d2be;
--chip: #e6eedc;
}
article {
color: var(--ink);
}
p { margin: 0; }
b {
font-size: 2.2rem;
font-weight: 800;
letter-spacing: -0.05em;
line-height: 1;
}
small {
color: var(--muted);
font-size: 0.85rem;
}
h2 {
margin: 0.2rem 0 0;
color: var(--muted);
font-size: 0.85rem;
font-weight: 600;
}
Tailwind
<style>
:root {
--ink: #1e2a1c;
--paper: #f3f6ee;
--accent: #3f6b3a;
--accent-2: #8a6a32;
--on-accent: #f5f8ef;
--muted: #66725f;
--line: #c9d2be;
--chip: #e6eedc;
}
</style>
<article class="text-[var(--ink)]">
<p class="m-0"><b class="text-[2.2rem] font-extrabold tracking-[-0.05em] leading-[1]">24</b> <small class="text-[var(--muted)] text-[0.85rem]">yen</small></p>
<h2 class="m-[0.2rem_0_0] text-[var(--muted)] text-[0.85rem] font-semibold">Per set</h2>
</article>