Preview
HTML
<ul>
<li><h2>Alpha</h2><p>Card one.</p></li>
<li><h2>Beta</h2><p>Card two.</p></li>
<li><h2>Gamma</h2><p>Card three.</p></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(9rem, 1fr));
gap: 0.75rem;
padding: 0;
list-style: none;
}
li {
padding: 0.9rem;
border-radius: 0.9rem;
background: var(--paper);
box-shadow: 0 10px 24px rgb(from var(--ink) r g b / 8%);
}
h2,
p {
margin: 0;
}
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(9rem,_1fr))] gap-[0.75rem] p-0 list-none">
<li class="p-[0.9rem] rounded-[0.9rem] bg-[var(--paper)] [box-shadow:0_10px_24px_rgb(from_var(--ink)_r_g_b_/_8%)]"><h2 class="m-0">Alpha</h2><p class="m-0">Card one.</p></li>
<li class="p-[0.9rem] rounded-[0.9rem] bg-[var(--paper)] [box-shadow:0_10px_24px_rgb(from_var(--ink)_r_g_b_/_8%)]"><h2 class="m-0">Beta</h2><p class="m-0">Card two.</p></li>
<li class="p-[0.9rem] rounded-[0.9rem] bg-[var(--paper)] [box-shadow:0_10px_24px_rgb(from_var(--ink)_r_g_b_/_8%)]"><h2 class="m-0">Gamma</h2><p class="m-0">Card three.</p></li>
</ul>