Testimonials
Video story cards
Play-button thumbnails with a pull quote
Play-button thumbnails with a pull quote
Build a customer-story section with Tailwind CSS built around video thumbnails. A left-aligned heading with a "View all 40 stories →" link pushed to the right on md and up, then a three-column grid of story cards. Each card is a rounded-2xl bordered tile whose top is a 16:9 thumbnail: a dark gradient panel with a faint oversized customer initial behind it, a white circular play button centred with a group-hover scale, a duration pill in the bottom-right corner, and an industry tag in the top-left. The card body holds a short pull quote in medium weight, then a footer row with a small avatar circle, the speaker's name, and their title. Keep the whole card wrapped in a group so the play button and the quote react together on hover, and stack to one column on mobile.<section class="mx-auto max-w-6xl px-6 py-16">
<div class="flex flex-wrap items-end justify-between gap-4">
<div>
<h2 class="text-3xl font-semibold text-neutral-900">Three minutes, three teams</h2>
<p class="mt-2 text-neutral-500">Short conversations about what actually changed after the switch.</p>
</div>
<a href="#" class="text-sm font-medium text-neutral-900 hover:underline">View all 40 stories →</a>
</div>
<div class="mt-10 grid gap-6 md:grid-cols-3">
<article class="group overflow-hidden rounded-2xl border border-neutral-200 bg-white transition hover:shadow-lg">
<div class="relative flex aspect-video items-center justify-center overflow-hidden bg-gradient-to-br from-neutral-800 to-neutral-950">
<span class="absolute -bottom-6 right-2 text-[9rem] font-semibold leading-none text-white/5">N</span>
<span class="absolute left-3 top-3 rounded-full bg-white/10 px-2.5 py-1 text-[11px] font-medium text-white">Logistics</span>
<button aria-label="Play story" class="relative flex h-14 w-14 items-center justify-center rounded-full bg-white text-neutral-900 shadow-lg transition group-hover:scale-110"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m9 7 9 5-9 5V7Z" fill="currentColor" stroke="none"/></svg></button>
<span class="absolute bottom-3 right-3 rounded-md bg-black/60 px-1.5 py-0.5 font-mono text-[11px] text-white">2:41</span>
</div>
<div class="p-6">
<p class="font-medium leading-relaxed text-neutral-900">"We cut the release checklist from 34 steps to four. Nobody misses the old one."</p>
<div class="mt-5 flex items-center gap-3">
<span class="flex h-9 w-9 items-center justify-center rounded-full bg-neutral-200 text-xs font-medium text-neutral-700">AR</span>
<div><p class="text-sm font-medium text-neutral-900">Alex Rivera</p><p class="text-xs text-neutral-500">CTO, Northwind</p></div>
</div>
</div>
</article>
<article class="group overflow-hidden rounded-2xl border border-neutral-200 bg-white transition hover:shadow-lg">
<div class="relative flex aspect-video items-center justify-center overflow-hidden bg-gradient-to-br from-neutral-700 to-neutral-900">
<span class="absolute -bottom-6 right-2 text-[9rem] font-semibold leading-none text-white/5">M</span>
<span class="absolute left-3 top-3 rounded-full bg-white/10 px-2.5 py-1 text-[11px] font-medium text-white">Fintech</span>
<button aria-label="Play story" class="relative flex h-14 w-14 items-center justify-center rounded-full bg-white text-neutral-900 shadow-lg transition group-hover:scale-110"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m9 7 9 5-9 5V7Z" fill="currentColor" stroke="none"/></svg></button>
<span class="absolute bottom-3 right-3 rounded-md bg-black/60 px-1.5 py-0.5 font-mono text-[11px] text-white">3:07</span>
</div>
<div class="p-6">
<p class="font-medium leading-relaxed text-neutral-900">"Our auditors got read-only access on a Friday and closed the review by Monday."</p>
<div class="mt-5 flex items-center gap-3">
<span class="flex h-9 w-9 items-center justify-center rounded-full bg-neutral-200 text-xs font-medium text-neutral-700">PK</span>
<div><p class="text-sm font-medium text-neutral-900">Priya Kapoor</p><p class="text-xs text-neutral-500">Head of Platform, Meridian</p></div>
</div>
</div>
</article>
<article class="group overflow-hidden rounded-2xl border border-neutral-200 bg-white transition hover:shadow-lg">
<div class="relative flex aspect-video items-center justify-center overflow-hidden bg-gradient-to-br from-neutral-900 to-black">
<span class="absolute -bottom-6 right-2 text-[9rem] font-semibold leading-none text-white/5">C</span>
<span class="absolute left-3 top-3 rounded-full bg-white/10 px-2.5 py-1 text-[11px] font-medium text-white">Healthcare</span>
<button aria-label="Play story" class="relative flex h-14 w-14 items-center justify-center rounded-full bg-white text-neutral-900 shadow-lg transition group-hover:scale-110"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m9 7 9 5-9 5V7Z" fill="currentColor" stroke="none"/></svg></button>
<span class="absolute bottom-3 right-3 rounded-md bg-black/60 px-1.5 py-0.5 font-mono text-[11px] text-white">1:58</span>
</div>
<div class="p-6">
<p class="font-medium leading-relaxed text-neutral-900">"Two engineers now run what used to need a vendor and a standing meeting."</p>
<div class="mt-5 flex items-center gap-3">
<span class="flex h-9 w-9 items-center justify-center rounded-full bg-neutral-200 text-xs font-medium text-neutral-700">JO</span>
<div><p class="text-sm font-medium text-neutral-900">Jonas Ohlsson</p><p class="text-xs text-neutral-500">Director of Eng, Calla Health</p></div>
</div>
</div>
</article>
</div>
</section>