testimonialsBeginner
Testimonial — Featured Quote
A single featured testimonial with large portrait and quote.
Claude prompt
Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.
Build a featured testimonial with Tailwind: a large portrait on one side and a big-text quote with attribution on the other. Used for high-trust customer stories.
Code
html
<!--
Source: Mert Cukuren (Tailblocks)
https://github.com/mertJF/tailblocks/blob/master/src/blocks/testimonial/light/c.js
License: MIT
Surfaced via https://vibedex.io/components/tailblocks-testimonial-light-c
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
<div class="w-full">
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-wrap -m-4">
<div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
<div class="h-full text-center">
<img
alt="testimonial"
class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100"
src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&q=80&w=302&h=302"
/>
<p class="leading-relaxed">Real teams use these patterns to skip a week of design work. Real teams also rewrite half of them — that's the point.</p>
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
<h2 class="text-gray-900 font-medium title-font tracking-wider text-sm">
HOLDEN CAULFIELD
</h2>
<p class="text-gray-500">Senior Product Designer</p>
</div>
</div>
<div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
<div class="h-full text-center">
<img
alt="testimonial"
class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100"
src="https://images.unsplash.com/photo-1560769629-975ec94e6a86?auto=format&fit=crop&q=80&w=300&h=300"
/>
<p class="leading-relaxed">Your component, your code. We handed you a clean starting point so you can focus on the parts that actually differentiate your product.</p>
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
<h2 class="text-gray-900 font-medium title-font tracking-wider text-sm">
ALPER KAMU
</h2>
<p class="text-gray-500">UI Develeoper</p>
</div>
</div>
<div class="lg:w-1/3 lg:mb-0 p-4">
<div class="h-full text-center">
<img
alt="testimonial"
class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100"
src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&fit=crop&q=80&w=305&h=305"
/>
<p class="leading-relaxed">Build modern interfaces in a fraction of the time. Drop these blocks into your project and customize them to fit your brand.</p>
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
<h2 class="text-gray-900 font-medium title-font tracking-wider text-sm">
HENRY LETHAM
</h2>
<p class="text-gray-500">CTO</p>
</div>
</div>
</div>
</div>
</section>
</div>
</div>