Free Tailwind css Testimonial
Free Tailwind css ui best Testimonial in bardui.com - You made it so simple. My new site is so much faster and easier to work with than my old site. I just choose the page, make the change and click save.
Last 2 weeks agoPreview
Code
HTML
React
<section class="py-10 bg-white sm:py-16 lg:py-24">
<div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="grid grid-cols-1 gap-3 lg:gap-6 sm:grid-cols-2 md:grid-cols-3">
<div class="flex flex-col bg-white border border-gray-200 rounded-md">
<div class="flex flex-col justify-between flex-1 p-8">
<div class="flex-1">
<blockquote>
<p class="text-lg text-gray-800">“You made it so simple. My new site is so much faster and
easier to work with than my old site. I just choose the page, make the change and click
save.”</p>
</blockquote>
</div>
<div class="mt-8">
<div class="w-full h-0 mb-8 border-t-2 border-gray-200 border-dotted"></div>
<div class="flex items-center">
<img class="flex-shrink-0 object-cover w-10 h-10 rounded-full" src="https://cdn.rareblocks.xyz/collection/celebration/images/testimonials/8/avatar-1.jpg" alt="" />
<div class="ml-3">
<p class="text-base font-semibold text-gray-800 truncate">Devon Lane</p>
<p class="text-base text-gray-500 truncate">President of Sales</p>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col bg-white border border-gray-200 rounded-md">
<div class="flex flex-col justify-between flex-1 p-8">
<div class="flex-1">
<blockquote>
<p class="text-lg text-gray-800">“Simply the best. Better than all the rest. I’d recommend
this product to beginners and advanced users.”</p>
</blockquote>
</div>
<div class="mt-8">
<div class="w-full h-0 mb-8 border-t-2 border-gray-200 border-dotted"></div>
<div class="flex items-center">
<img class="flex-shrink-0 object-cover w-10 h-10 rounded-full" src="https://cdn.rareblocks.xyz/collection/celebration/images/testimonials/8/avatar-2.jpg" alt="" />
<div class="min-w-0 ml-3">
<p class="text-base font-semibold text-gray-800 truncate">Ronald Richards</p>
<p class="text-base text-gray-500 truncate">Marketing Coordinator</p>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col bg-white border border-gray-200 rounded-md">
<div class="flex flex-col justify-between flex-1 p-8">
<div class="flex-1">
<blockquote>
<p class="text-lg text-gray-800">“This is a top quality product. No need to think twice
before making it live on web.”</p>
</blockquote>
</div>
<div class="mt-8">
<div class="w-full h-0 mb-8 border-t-2 border-gray-200 border-dotted"></div>
<div class="flex items-center">
<img class="flex-shrink-0 object-cover w-10 h-10 rounded-full" src="https://cdn.rareblocks.xyz/collection/celebration/images/testimonials/8/avatar-3.jpg" alt="" />
<div class="min-w-0 ml-3">
<p class="text-base font-semibold text-gray-800 truncate">Jane Cooper</p>
<p class="text-base text-gray-500 truncate">Dog Trainer</p>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col bg-white border border-gray-200 rounded-md">
<div class="flex flex-col justify-between flex-1 p-8">
<div class="flex-1">
<blockquote>
<p class="text-lg text-gray-800">“Finally, I’ve found a template that covers all bases for a
bootstrapped startup. We were able to launch in days, not months.”</p>
</blockquote>
</div>
<div class="mt-8">
<div class="w-full h-0 mb-8 border-t-2 border-gray-200 border-dotted"></div>
<div class="flex items-center">
<img class="flex-shrink-0 object-cover w-10 h-10 rounded-full" src="https://cdn.rareblocks.xyz/collection/celebration/images/testimonials/8/avatar-4.jpg" alt="" />
<div class="min-w-0 ml-3">
<p class="text-base font-semibold text-gray-800 truncate">Theresa Webb</p>
<p class="text-base text-gray-500 truncate">Web Designer</p>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col bg-white border border-gray-200 rounded-md">
<div class="flex flex-col justify-between flex-1 p-8">
<div class="flex-1">
<blockquote>
<p class="text-lg text-gray-800">“My new site is so much faster and easier to work with than
my old site. I just choose the page, make the change and click save.”</p>
</blockquote>
</div>
<div class="mt-8">
<div class="w-full h-0 mb-8 border-t-2 border-gray-200 border-dotted"></div>
<div class="flex items-center">
<img class="flex-shrink-0 object-cover w-10 h-10 rounded-full" src="https://cdn.rareblocks.xyz/collection/celebration/images/testimonials/8/avatar-5.jpg" alt="" />
<div class="min-w-0 ml-3">
<p class="text-base font-semibold text-gray-800 truncate">Darlene Robertson</p>
<p class="text-base text-gray-500 truncate">Medical Assistant</p>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col bg-white border border-gray-200 rounded-md">
<div class="flex flex-col justify-between flex-1 p-8">
<div class="flex-1">
<blockquote>
<p class="text-lg text-gray-800">“You made it so simple. My new site is so much faster and
easier to work with than my old site. I just choose the page, make the change and click
save.”</p>
</blockquote>
</div>
<div class="mt-8">
<div class="w-full h-0 mb-8 border-t-2 border-gray-200 border-dotted"></div>
<div class="flex items-center">
<img class="flex-shrink-0 object-cover w-10 h-10 rounded-full" src="https://cdn.rareblocks.xyz/collection/celebration/images/testimonials/8/avatar-6.jpg" alt="" />
<div class="min-w-0 ml-3">
<p class="text-base font-semibold text-gray-800 truncate">Floyd Miles</p>
<p class="text-base text-gray-500 truncate">Nursing Assistant</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Muhammad Imran
26 components