Preview
HTML
<article>
<h1>Type that breathes</h1>
<p>Measure the line. Then stop adding boxes.</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: 1fr min(8rem, 30%);
gap: 0.75rem 1rem;
max-width: 28rem;
color: var(--ink);
}
h1 {
margin: 0;
font-family: Palatino, Georgia, serif;
font-size: 1.7rem;
line-height: 1.1;
}
p {
margin: 0;
padding-top: 0.2rem;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 0.85rem;
}
Tailwind
<style>
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
</style>
<article class="grid [grid-template-columns:1fr_min(8rem,_30%)] gap-[0.75rem_1rem] max-w-[28rem] text-[var(--ink)]">
<h1 class="m-0 font-[Palatino,_Georgia,_serif] text-[1.7rem] leading-[1.1]">Type that breathes</h1>
<p class="m-0 pt-[0.2rem] [border-top:1px_solid_var(--line)] text-[var(--muted)] text-[0.85rem]">Measure the line. Then stop adding boxes.</p>
</article>