プレビュー
HTML
<article>
<header>Issue 12</header>
<p>Quiet surfaces, loud type.</p>
</article>
CSS
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
article {
display: grid;
grid-template-columns: 0.7rem 1fr;
min-width: min(100%, 18rem);
overflow: hidden;
border-radius: 1.1rem;
background: var(--paper);
box-shadow: 0 18px 40px rgb(from var(--ink) r g b / 12%);
}
article::before {
content: "";
background: var(--accent);
}
header,
p {
margin: 0;
padding-inline: 1rem;
}
header {
padding-top: 1rem;
color: var(--accent);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
p {
padding-bottom: 1rem;
font-size: 1.2rem;
}
Tailwind
<style>
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
article::before {
content: "";
background: var(--accent);
}
</style>
<article class="grid [grid-template-columns:0.7rem_1fr] min-w-[min(100%,_18rem)] overflow-hidden rounded-[1.1rem] bg-[var(--paper)] [box-shadow:0_18px_40px_rgb(from_var(--ink)_r_g_b_/_12%)]">
<header class="m-0 px-[1rem] pt-[1rem] text-[var(--accent)] text-[0.75rem] font-extrabold tracking-[0.14em] uppercase">Issue 12</header>
<p class="m-0 px-[1rem] pb-[1rem] text-[1.2rem]">Quiet surfaces, loud type.</p>
</article>