Quote cards with avatar footer
Build a testimonials section with Tailwind CSS: three quote cards in a responsive grid. Each card has a quote paragraph, and a footer with a round avatar placeholder, a name, and a role. White cards, thin borders, rounded-2xl. Add a centered heading above the grid.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the finished markup? .
Build a testimonials section with Tailwind CSS: three quote cards in a responsive grid. Each card has a quote paragraph, and a footer with a round avatar placeholder, a name, and a role. White cards, thin borders, rounded-2xl. Add a centered heading above the grid.<section class="mx-auto max-w-6xl px-6 py-16">
<h2 class="mb-10 text-center text-3xl font-semibold text-neutral-900">Loved by teams everywhere</h2>
<div class="grid gap-6 md:grid-cols-3">
<figure class="rounded-2xl border border-neutral-200 bg-white p-6">
<blockquote class="text-neutral-700">"We cut our release cycle in half within a month. Genuinely game-changing."</blockquote>
<figcaption class="mt-6 flex items-center gap-3">
<span class="h-10 w-10 rounded-full bg-neutral-200"></span>
<span><span class="block text-sm font-medium text-neutral-900">Mara Lin</span><span class="block text-xs text-neutral-500">Head of Eng, Flux</span></span>
</figcaption>
</figure>
<figure class="rounded-2xl border border-neutral-200 bg-white p-6">
<blockquote class="text-neutral-700">"The onboarding was so smooth our whole team was live the same day."</blockquote>
<figcaption class="mt-6 flex items-center gap-3">
<span class="h-10 w-10 rounded-full bg-neutral-200"></span>
<span><span class="block text-sm font-medium text-neutral-900">Devon Okafor</span><span class="block text-xs text-neutral-500">PM, Latitude</span></span>
</figcaption>
</figure>
<figure class="rounded-2xl border border-neutral-200 bg-white p-6">
<blockquote class="text-neutral-700">"Support actually solves problems. That alone is worth the price."</blockquote>
<figcaption class="mt-6 flex items-center gap-3">
<span class="h-10 w-10 rounded-full bg-neutral-200"></span>
<span><span class="block text-sm font-medium text-neutral-900">Priya Shah</span><span class="block text-xs text-neutral-500">Founder, Kettle</span></span>
</figcaption>
</figure>
</div>
</section>