Article prose layout

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>