プレビュー
HTML
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</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: 2fr 1fr;
grid-template-rows: 4.5rem 3rem;
gap: 0.4rem;
width: min(100%, 16rem);
padding: 0;
list-style: none;
}
li {
display: grid;
place-items: center;
border-radius: 0.7rem;
background: var(--chip);
color: var(--ink);
font-weight: 800;
}
li:first-child {
grid-row: 1 / 3;
background: var(--accent);
color: var(--on-accent);
}
Tailwind
<style>
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
li:first-child {
grid-row: 1 / 3;
background: var(--accent);
color: var(--on-accent);
}
</style>
<ul class="grid [grid-template-columns:2fr_1fr] [grid-template-rows:4.5rem_3rem] gap-[0.4rem] w-[min(100%,_16rem)] p-0 list-none">
<li class="grid place-items-center rounded-[0.7rem] bg-[var(--chip)] text-[var(--ink)] font-extrabold">A</li>
<li class="grid place-items-center rounded-[0.7rem] bg-[var(--chip)] text-[var(--ink)] font-extrabold">B</li>
<li class="grid place-items-center rounded-[0.7rem] bg-[var(--chip)] text-[var(--ink)] font-extrabold">C</li>
<li class="grid place-items-center rounded-[0.7rem] bg-[var(--chip)] text-[var(--ink)] font-extrabold">D</li>
</ul>