Readable single-column post body
Create a readable article layout with Tailwind CSS: a centered max-w-2xl column with a category label, a large title, a byline row (avatar, name, date, read time), a cover image, and a body using the typography plugin classes (prose) with headings, paragraphs, a blockquote, and a list. Keep line length comfortable.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the finished markup? .
Create a readable article layout with Tailwind CSS: a centered max-w-2xl column with a category label, a large title, a byline row (avatar, name, date, read time), a cover image, and a body using the typography plugin classes (prose) with headings, paragraphs, a blockquote, and a list. Keep line length comfortable.<article class="mx-auto max-w-2xl px-6 py-16">
<p class="text-sm font-medium uppercase tracking-wide text-indigo-600">Product</p>
<h1 class="mt-2 text-4xl font-semibold tracking-tight text-neutral-900">Building a design system that lasts</h1>
<div class="mt-4 flex items-center gap-3 text-sm text-neutral-500">
<span class="h-8 w-8 rounded-full bg-neutral-200"></span>
<span>Nina Alvarez</span><span>·</span><span>Mar 14</span><span>·</span><span>6 min read</span>
</div>
<div class="mt-8 aspect-video rounded-2xl bg-neutral-100"></div>
<div class="prose prose-neutral mt-8 max-w-none">
<p>A design system isn't a component library — it's a shared language. Here's how we think about keeping ours coherent as the team grows.</p>
<h2>Start with tokens</h2>
<p>Every durable system begins with primitives: color, spacing, and type scales that everything else references.</p>
<blockquote>Consistency is a feature, not a constraint.</blockquote>
<ul><li>Name things by intent, not appearance.</li><li>Document the "why", not just the "what".</li></ul>
</div>
</article>