Preview
HTML
<section>
<h1>Today</h1>
<ul>
<li><data value="12">12</data></li>
<li><data value="4">4</data></li>
</ul>
</section>
CSS
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
section {
display: grid;
gap: 0.5rem;
width: min(100%, 16rem);
color: var(--ink);
}
h1 {
margin: 0;
font-size: 0.95rem;
}
ul {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
li {
padding: 0.85rem 0.9rem;
border: 1px solid var(--line);
border-radius: 0.75rem;
background: var(--paper);
font-size: 1.4rem;
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>
<section class="grid gap-[0.5rem] w-[min(100%,_16rem)] text-[var(--ink)]">
<h1 class="m-0 text-[0.95rem]">Today</h1>
<ul class="grid [grid-template-columns:1fr_1fr] gap-[0.5rem] m-0 p-0 list-none">
<li class="p-[0.85rem_0.9rem] [border:1px_solid_var(--line)] rounded-[0.75rem] bg-[var(--paper)] text-[1.4rem] font-extrabold"><data value="12">12</data></li>
<li class="p-[0.85rem_0.9rem] [border:1px_solid_var(--line)] rounded-[0.75rem] bg-[var(--paper)] text-[1.4rem] font-extrabold"><data value="4">4</data></li>
</ul>
</section>