Blog card grid

Build a blog post grid with Tailwind CSS: three article cards, each with a rounded cover image placeholder, a small category tag, a title, a two-line excerpt, and a footer row with a tiny author avatar, name, and date. Cards lift slightly on hover. Responsive 1/2/3 columns.

<section class="mx-auto max-w-6xl px-6 py-16">
  <h2 class="mb-8 text-3xl font-semibold text-neutral-900">From the blog</h2>
  <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
    <article class="group overflow-hidden rounded-2xl border border-neutral-200 bg-white transition hover:-translate-y-1 hover:shadow-lg">
      <div class="aspect-video bg-neutral-100"></div>
      <div class="p-5">
        <span class="text-xs font-medium uppercase tracking-wide text-indigo-600">Engineering</span>
        <h3 class="mt-2 font-semibold text-neutral-900">How we cut build times by 70%</h3>
        <p class="mt-1 text-sm text-neutral-500">A deep dive into caching, parallelism, and the wins that added up.</p>
        <div class="mt-4 flex items-center gap-2 text-xs text-neutral-500">
          <span class="h-6 w-6 rounded-full bg-neutral-200"></span> Casey Park · Mar 12
        </div>
      </div>
    </article>
    <article class="group overflow-hidden rounded-2xl border border-neutral-200 bg-white transition hover:-translate-y-1 hover:shadow-lg">
      <div class="aspect-video bg-neutral-100"></div>
      <div class="p-5">
        <span class="text-xs font-medium uppercase tracking-wide text-indigo-600">Design</span>
        <h3 class="mt-2 font-semibold text-neutral-900">Designing for the first five minutes</h3>
        <p class="mt-1 text-sm text-neutral-500">Why onboarding is the most important screen you'll ever ship.</p>
        <div class="mt-4 flex items-center gap-2 text-xs text-neutral-500">
          <span class="h-6 w-6 rounded-full bg-neutral-200"></span> Ravi Menon · Mar 8
        </div>
      </div>
    </article>
    <article class="group overflow-hidden rounded-2xl border border-neutral-200 bg-white transition hover:-translate-y-1 hover:shadow-lg">
      <div class="aspect-video bg-neutral-100"></div>
      <div class="p-5">
        <span class="text-xs font-medium uppercase tracking-wide text-indigo-600">Company</span>
        <h3 class="mt-2 font-semibold text-neutral-900">Our Series B, and what's next</h3>
        <p class="mt-1 text-sm text-neutral-500">We raised to go deeper on the platform. Here's the plan.</p>
        <div class="mt-4 flex items-center gap-2 text-xs text-neutral-500">
          <span class="h-6 w-6 rounded-full bg-neutral-200"></span> Lena Fox · Mar 1
        </div>
      </div>
    </article>
  </div>
</section>