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