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.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
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>
