Featured post with side list

Build a blog index hero with Tailwind CSS: a two-thirds featured article on the left with a tall rounded cover placeholder, a category tag, a large title, a two-line excerpt, and an author-plus-date row. On the right third, a "More this week" heading over a divided list of three compact posts, each showing a small square thumbnail, a tight two-line title, and a date. Collapse to a single column on mobile with the featured post first.

<section class="mx-auto max-w-6xl px-6 py-16">
  <div class="grid gap-10 lg:grid-cols-3">
    <article class="group lg:col-span-2">
      <div class="aspect-[16/9] overflow-hidden rounded-2xl bg-neutral-100"></div>
      <span class="mt-5 inline-block text-xs font-medium uppercase tracking-wide text-indigo-600">Infrastructure</span>
      <h2 class="mt-2 text-3xl font-semibold leading-tight tracking-tight text-neutral-900 group-hover:underline">
        We deleted our staging environment and nothing broke
      </h2>
      <p class="mt-3 max-w-xl text-neutral-500">
        Ephemeral preview environments replaced a $40k/year machine that nobody trusted. Here is the migration, the cost math, and what we would do differently.
      </p>
      <div class="mt-5 flex items-center gap-3 text-sm text-neutral-500">
        <span class="h-8 w-8 rounded-full bg-neutral-200"></span>
        <span class="font-medium text-neutral-900">Casey Park</span><span>·</span><span>Aug 14</span><span>·</span><span>9 min read</span>
      </div>
    </article>

    <div>
      <h3 class="text-xs font-semibold uppercase tracking-wider text-neutral-400">More this week</h3>
      <div class="mt-4 divide-y divide-neutral-200">
        <a href="#" class="group flex gap-4 py-4">
          <span class="h-16 w-16 shrink-0 rounded-xl bg-neutral-100"></span>
          <span>
            <span class="block text-sm font-medium leading-snug text-neutral-900 group-hover:underline">Postgres row-level security, three years in</span>
            <span class="mt-1 block text-xs text-neutral-400">Aug 11</span>
          </span>
        </a>
        <a href="#" class="group flex gap-4 py-4">
          <span class="h-16 w-16 shrink-0 rounded-xl bg-neutral-100"></span>
          <span>
            <span class="block text-sm font-medium leading-snug text-neutral-900 group-hover:underline">Why our design tokens live in the API</span>
            <span class="mt-1 block text-xs text-neutral-400">Aug 7</span>
          </span>
        </a>
        <a href="#" class="group flex gap-4 py-4">
          <span class="h-16 w-16 shrink-0 rounded-xl bg-neutral-100"></span>
          <span>
            <span class="block text-sm font-medium leading-snug text-neutral-900 group-hover:underline">Hiring engineers who have never used our stack</span>
            <span class="mt-1 block text-xs text-neutral-400">Aug 2</span>
          </span>
        </a>
      </div>
    </div>
  </div>
</section>