Build a masonry-style testimonial wall with Tailwind CSS using CSS columns (columns-1 md:columns-2 lg:columns-3 with gap) so cards of different heights tile naturally. Each card is break-inside-avoid, rounded-2xl, and alternates between a white bordered card and a dark filled card for rhythm. Cards contain a quote of varying length and a compact author row with an avatar circle, name, and company. Add a centered heading and a muted subline above the wall.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Build a masonry-style testimonial wall with Tailwind CSS using CSS columns (columns-1 md:columns-2 lg:columns-3 with gap) so cards of different heights tile naturally. Each card is break-inside-avoid, rounded-2xl, and alternates between a white bordered card and a dark filled card for rhythm. Cards contain a quote of varying length and a compact author row with an avatar circle, name, and company. Add a centered heading and a muted subline above the wall.
<section class="mx-auto max-w-6xl px-6 py-16">
<div class="mx-auto mb-10 max-w-xl text-center">
<h2 class="text-3xl font-semibold text-neutral-900">What people actually say</h2>
<p class="mt-2 text-neutral-500">Unedited, straight from support tickets and release threads.</p>
</div>
<div class="columns-1 gap-4 md:columns-2 lg:columns-3">
<figure class="mb-4 break-inside-avoid rounded-2xl border border-neutral-200 bg-white p-5">
<blockquote class="text-sm leading-relaxed text-neutral-700">"We migrated 40 repositories over a weekend. Monday morning nobody noticed anything had changed, which is the highest compliment I can give a migration."</blockquote>
<figcaption class="mt-4 flex items-center gap-2.5">
<span class="h-8 w-8 rounded-full bg-neutral-200"></span>
<span class="text-xs"><span class="block font-medium text-neutral-900">Ines Duarte</span><span class="block text-neutral-500">Staff Engineer, Corvus</span></span>
</figcaption>
</figure>
<figure class="mb-4 break-inside-avoid rounded-2xl bg-neutral-900 p-5">
<blockquote class="text-sm leading-relaxed text-neutral-100">"Cut our on-call pages by two thirds."</blockquote>
<figcaption class="mt-4 flex items-center gap-2.5">
<span class="h-8 w-8 rounded-full bg-neutral-700"></span>
<span class="text-xs"><span class="block font-medium text-white">Tomas Berg</span><span class="block text-neutral-400">SRE Lead, Halcyon</span></span>
</figcaption>
</figure>
<figure class="mb-4 break-inside-avoid rounded-2xl border border-neutral-200 bg-white p-5">
<blockquote class="text-sm leading-relaxed text-neutral-700">"The audit log alone got us through SOC 2 without hiring a consultant. Our auditor asked which vendor we used."</blockquote>
<figcaption class="mt-4 flex items-center gap-2.5">
<span class="h-8 w-8 rounded-full bg-neutral-200"></span>
<span class="text-xs"><span class="block font-medium text-neutral-900">Yuki Tanaka</span><span class="block text-neutral-500">Head of Security, Palewood</span></span>
</figcaption>
</figure>
<figure class="mb-4 break-inside-avoid rounded-2xl border border-neutral-200 bg-white p-5">
<blockquote class="text-sm leading-relaxed text-neutral-700">"Finally, a roadmap our sales team is willing to read."</blockquote>
<figcaption class="mt-4 flex items-center gap-2.5">
<span class="h-8 w-8 rounded-full bg-neutral-200"></span>
<span class="text-xs"><span class="block font-medium text-neutral-900">Omar Haddad</span><span class="block text-neutral-500">CRO, Bellrock</span></span>
</figcaption>
</figure>
<figure class="mb-4 break-inside-avoid rounded-2xl bg-neutral-900 p-5">
<blockquote class="text-sm leading-relaxed text-neutral-100">"I evaluated six tools in this category. This was the only one where the demo matched the product we actually received."</blockquote>
<figcaption class="mt-4 flex items-center gap-2.5">
<span class="h-8 w-8 rounded-full bg-neutral-700"></span>
<span class="text-xs"><span class="block font-medium text-white">Claire Mensah</span><span class="block text-neutral-400">Director of IT, Vantage</span></span>
</figcaption>
</figure>
<figure class="mb-4 break-inside-avoid rounded-2xl border border-neutral-200 bg-white p-5">
<blockquote class="text-sm leading-relaxed text-neutral-700">"Support replied in nine minutes. On a Sunday. With a patch."</blockquote>
<figcaption class="mt-4 flex items-center gap-2.5">
<span class="h-8 w-8 rounded-full bg-neutral-200"></span>
<span class="text-xs"><span class="block font-medium text-neutral-900">Ben Okonkwo</span><span class="block text-neutral-500">Founder, Tidewell</span></span>
</figcaption>
</figure>
</div>
</section>
