プレビュー
HTML
<figure>
<svg viewBox="0 0 24 24" width="72" height="72" aria-hidden="true">
<path fill="none" stroke="currentColor" stroke-width="2" d="M12 20S4 14 4 9a4 4 0 0 1 8 0 4 4 0 0 1 8 0c0 5-8 11-8 11z" />
</svg>
<figcaption>Heart</figcaption>
</figure>
CSS
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
figure { margin: 0; text-align: center; color: var(--ink); }
figcaption { margin-top: 0.4rem; font-weight: 700; }
Tailwind
<style>
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
</style>
<figure class="m-0 text-center text-[var(--ink)]">
<svg viewBox="0 0 24 24" width="72" height="72" aria-hidden="true">
<path fill="none" stroke="currentColor" stroke-width="2" d="M12 20S4 14 4 9a4 4 0 0 1 8 0 4 4 0 0 1 8 0c0 5-8 11-8 11z" />
</svg>
<figcaption class="mt-[0.4rem] font-bold">Heart</figcaption>
</figure>