Testimonials Customers Using Tailwind UI
Testimonials from satisfied customers beautifully presented with Tailwind create trust and credibility, showcasing the positive experiences of your clients. Inspired design by Ildiko Gaspar from dribbble.
testimonials
Loading component...
60 lines
<!-- Inspired design by Ildiko Gaspar from dribbble https://dribbble.com/shots/16364815-Testimonials -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
</style>
<section class="flex items-center justify-center w-screen h-screen px-8 sm:px-0 bg-[#EDEFF8]">
<div class="container max-w-xl mx-auto bg-white rounded-xl">
<div class="flex flex-col items-center w-full p-6 rounded-md lg:h-full lg:p-8 dark:bg-gray-900 dark:text-gray-100">
<div class="mb-8 text-center">
<h1 class="text-2xl font-bold">A word from our customers</h1>
<p class="text-sm text-gray-500">We'he been helping businesses do their best since 2000</p>
</div>
<div class="flex items-center justify-center space-x-4">
<span class="p-2 border border-gray-500 rounded-full cursor-pointer hover:bg-gray-900 group">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6 stroke-current group-hover:stroke-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
</svg>
</span>
<div class="flex flex-col items-center mb-4">
<span
class="relative p-3 text-sm font-medium leading-relaxed text-center whitespace-no-wrap bg-gray-900 rounded-xl text-gray-50">
Both attractive and highly adaptable. Buy this now. Thank you for making it painless,
pleasant
and most of all hassle free!
</span>
<div class="w-4 h-4 -mt-2 rotate-45 bg-gray-900"></div>
</div>
<span class="p-2 border border-gray-500 rounded-full cursor-pointer hover:bg-gray-900 group ">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6 stroke-current group-hover:stroke-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</span>
</div>
<img
src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60"
alt="" class="object-cover w-16 h-16 mb-4 rounded-full dark:bg-gray-500">
<div class="mb-8 text-center">
<p class="text-base font-semibold">Lea Jenkins</p>
<p class="text-xs font-medium text-gray-500">Founders & CEO of Company Co.</p>
</div>
<div class="flex space-x-2">
<button type="button" aria-label="Page 4" class="w-2 h-2 bg-gray-600 rounded-full"></button>
<button type="button" aria-label="Page 1" class="w-2 h-2 bg-white border border-gray-500 rounded-full"></button>
<button type="button" aria-label="Page 1" class="w-2 h-2 bg-white border border-gray-500 rounded-full"></button>
</div>
</div>
</div>
</section>