プレビュー
HTML
<nav aria-label="Sections">
<ul>
<li><a href="#rail-a">Type</a></li>
<li><a href="#rail-b" aria-current="page">Space</a></li>
<li><a href="#rail-c">Color</a></li>
</ul>
</nav>
CSS
:root {
--ink: #1e2a1c;
--paper: #f3f6ee;
--accent: #3f6b3a;
--accent-2: #8a6a32;
--on-accent: #f5f8ef;
--muted: #66725f;
--line: #c9d2be;
--chip: #e6eedc;
}
ul {
display: flex;
gap: 0.25rem;
width: max-content;
margin: 0;
padding: 0.25rem;
border-radius: 999px;
background: var(--chip);
list-style: none;
}
a {
display: block;
padding: 0.35rem 0.8rem;
border-radius: 999px;
color: var(--ink);
font-weight: 650;
text-decoration: none;
}
a[aria-current="page"] {
background: var(--accent);
color: var(--on-accent);
}
Tailwind
<style>
:root {
--ink: #1e2a1c;
--paper: #f3f6ee;
--accent: #3f6b3a;
--accent-2: #8a6a32;
--on-accent: #f5f8ef;
--muted: #66725f;
--line: #c9d2be;
--chip: #e6eedc;
}
a[aria-current="page"] {
background: var(--accent);
color: var(--on-accent);
}
</style>
<nav aria-label="Sections">
<ul class="flex gap-[0.25rem] w-[max-content] m-0 p-[0.25rem] rounded-full bg-[var(--chip)] list-none">
<li><a class="block p-[0.35rem_0.8rem] rounded-full text-[var(--ink)] font-[650] [text-decoration:none]" href="#rail-a">Type</a></li>
<li><a class="block p-[0.35rem_0.8rem] rounded-full text-[var(--ink)] font-[650] [text-decoration:none]" href="#rail-b" aria-current="page">Space</a></li>
<li><a class="block p-[0.35rem_0.8rem] rounded-full text-[var(--ink)] font-[650] [text-decoration:none]" href="#rail-c">Color</a></li>
</ul>
</nav>