Preview
HTML
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
</ul>
CSS
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
gap: 0.75rem;
padding: 0;
list-style: none;
}
li {
display: grid;
place-items: center;
aspect-ratio: 1;
border-radius: 0.9rem;
background: var(--ink);
color: var(--on-accent);
font-weight: 800;
}
Tailwind
<style>
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
</style>
<ul class="grid [grid-template-columns:repeat(auto-fit,_minmax(6rem,_1fr))] gap-[0.75rem] p-0 list-none">
<li class="grid place-items-center [aspect-ratio:1] rounded-[0.9rem] bg-[var(--ink)] text-[var(--on-accent)] font-extrabold">01</li>
<li class="grid place-items-center [aspect-ratio:1] rounded-[0.9rem] bg-[var(--ink)] text-[var(--on-accent)] font-extrabold">02</li>
<li class="grid place-items-center [aspect-ratio:1] rounded-[0.9rem] bg-[var(--ink)] text-[var(--on-accent)] font-extrabold">03</li>
<li class="grid place-items-center [aspect-ratio:1] rounded-[0.9rem] bg-[var(--ink)] text-[var(--on-accent)] font-extrabold">04</li>
</ul>