プレビュー
HTML
<figure>
<svg viewBox="0 0 24 24" width="72" height="72" aria-hidden="true">
<path fill="none" stroke="currentColor" stroke-width="2" d="M3 6h18v12H3z" />
<path fill="none" stroke="currentColor" stroke-width="2" d="M3 6l9 7 9-7" />
</svg>
<figcaption>Mail</figcaption>
</figure>
CSS
:root {
--ink: #0f2740;
--paper: #eef6fb;
--accent: #1d6f9a;
--accent-2: #0f2740;
--on-accent: #f4fbff;
--muted: #5b7386;
--line: #c5d8e6;
--chip: #dceaf3;
}
figure { margin: 0; text-align: center; color: var(--ink); }
figcaption { margin-top: 0.4rem; font-weight: 700; }
Tailwind
<style>
:root {
--ink: #0f2740;
--paper: #eef6fb;
--accent: #1d6f9a;
--accent-2: #0f2740;
--on-accent: #f4fbff;
--muted: #5b7386;
--line: #c5d8e6;
--chip: #dceaf3;
}
</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="M3 6h18v12H3z" />
<path fill="none" stroke="currentColor" stroke-width="2" d="M3 6l9 7 9-7" />
</svg>
<figcaption class="mt-[0.4rem] font-bold">Mail</figcaption>
</figure>