Best Tailwind CSS Testimonials for Client Feedback
Discover a curated collection of the best testimonial sections built with Tailwind CSS. Boost credibility with responsive and visually appealing testimonial designs that highlight customer feedback and endorsements.
Last 1 week agoPreview
Code
HTML
React
<section class="bg-gray-100 py-32">
<div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="grid max-w-xl grid-cols-1 mx-auto text-center lg:max-w-full lg:grid-cols-3 gap-4">
<div class="overflow-hidden bg-white rounded-md shadow">
<div class="px-8 py-12">
<div class="relative w-24 h-24 mx-auto">
<img class="relative object-cover w-24 h-24 mx-auto rounded-full" src="https://cdn.rareblocks.xyz/collection/celebration/images/testimonials/1/avatar-1.jpg" alt="" />
<div
class="absolute top-0 right-0 flex items-center justify-center bg-blue-600 rounded-full w-7 h-7">
<svg class="w-4 h-4 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
fill="currentColor">
<path
d="M20.309 17.708C22.196 15.66 22.006 13.03 22 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.89 2.89 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292zm-11.007 0C11.19 15.66 10.999 13.03 10.993 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.89 2.89 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292z">
</path>
</svg>
</div>
</div>
<blockquote class="mt-7">
<p class="text-lg text-black">“Amet minim mollit non deserunt ullam co est sit aliqua dolor do
amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat”
</p>
</blockquote>
<p class="text-base font-semibold tex-tblack mt-9">Jenny Wilson</p>
<p class="mt-1 text-base text-gray-600">Project Manager at Microsoft</p>
</div>
</div>
<div class="overflow-hidden bg-white rounded-md shadow">
<div class="px-8 py-12">
<div class="relative w-24 h-24 mx-auto">
<img class="relative object-cover w-24 h-24 mx-auto rounded-full" src="https://cdn.rareblocks.xyz/collection/celebration/images/testimonials/1/avatar-2.jpg" alt="" />
<div
class="absolute top-0 right-0 flex items-center justify-center bg-blue-600 rounded-full w-7 h-7">
<svg class="w-4 h-4 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
fill="currentColor">
<path
d="M20.309 17.708C22.196 15.66 22.006 13.03 22 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.89 2.89 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292zm-11.007 0C11.19 15.66 10.999 13.03 10.993 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.89 2.89 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292z">
</path>
</svg>
</div>
</div>
<blockquote class="mt-7">
<p class="text-lg text-black">“Amet minim mollit non deserunt ullam co est sit aliqua dolor do
amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat”
</p>
</blockquote>
<p class="text-base font-semibold tex-tblack mt-9">Robert Fox</p>
<p class="mt-1 text-base text-gray-600">Founder at Brain.co</p>
</div>
</div>
<div class="overflow-hidden bg-white rounded-md shadow">
<div class="px-8 py-12">
<div class="relative w-24 h-24 mx-auto">
<img class="relative object-cover w-24 h-24 mx-auto rounded-full" src="https://cdn.rareblocks.xyz/collection/celebration/images/testimonials/1/avatar-3.jpg" alt="" />
<div
class="absolute top-0 right-0 flex items-center justify-center bg-blue-600 rounded-full w-7 h-7">
<svg class="w-4 h-4 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
fill="currentColor">
<path
d="M20.309 17.708C22.196 15.66 22.006 13.03 22 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.89 2.89 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292zm-11.007 0C11.19 15.66 10.999 13.03 10.993 13V5a1 1 0 0 0-1-1h-6c-1.103 0-2 .897-2 2v7a1 1 0 0 0 1 1h3.078a2.89 2.89 0 0 1-.429 1.396c-.508.801-1.465 1.348-2.846 1.624l-.803.16V20h1c2.783 0 4.906-.771 6.309-2.292z">
</path>
</svg>
</div>
</div>
<blockquote class="mt-7">
<p class="text-lg text-black">“Amet minim mollit non deserunt ullam co est sit aliqua dolor do
amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat”
</p>
</blockquote>
<p class="text-base font-semibold tex-tblack mt-9">Kristin Watson</p>
<p class="mt-1 text-base text-gray-600">UX Designer at Google</p>
</div>
</div>
</div>
</div>
</section>
Muhammad Imran
26 components