Testimonials
Ready to use Tailwind CSS testimonial components with production-ready, copy-paste HTML code. Use them as they are, or as a starting point to build beautiful websites.
Nothing sells like someone else saying your product is good. Testimonials are one of those sections that actually work, and having a layout that presents them well matters. We have quote grids, big featured pull quotes, multi-column card layouts, versions with a photo and star rating, and combined logo-plus-quote designs. Some are subtle, some are more bold. All just Tailwind CSS, swap in real names, quotes, and photos and you're good to go.
Tailwind
<section class="relative overflow-hidden bg-gray-50 py-24 sm:py-32">
<div class="absolute -left-[30rem] -top-[25rem] aspect-square h-[50rem] rounded-full shadow-2xl shadow-gray-500/10"></div>
<div class="absolute -bottom-[20rem] -right-[32rem] aspect-square h-[50rem] rounded-full shadow-2xl shadow-gray-500/20">
<div class="absolute left-1/2 top-1/2 aspect-square h-[30rem] -translate-x-1/2 -translate-y-1/2 rounded-full shadow-2xl shadow-gray-500/30"></div>
</div>
<div class="relative mx-auto max-w-2xl px-6 lg:max-w-4xl lg:px-8">
<svg class="mx-auto h-10 w-10 text-gray-900/10" viewBox="0 0 38 31" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M9.56016 14C11.8268 14.2 13.6602 15.0333 15.0602 16.5C16.4602 17.9667 17.1602 19.8333 17.1602 22.1C17.1602 24.5667 16.3602 26.6333 14.7602 28.3C13.2268 29.9 11.2935 30.7 8.96016 30.7C6.29349 30.7 4.16016 29.7667 2.56016 27.9C0.960157 25.9667 0.160156 23.2 0.160156 19.6C0.160156 12.6 2.62682 6.53333 7.56016 1.4C8.49349 0.466663 9.56016 -3.8147e-06 10.7602 -3.8147e-06C11.8935 -3.8147e-06 12.8935 0.399997 13.7602 1.2C14.6268 1.93333 15.0602 2.83333 15.0602 3.9C15.0602 4.83333 14.6935 5.7 13.9602 6.5C11.7602 8.83333 10.2935 11.3333 9.56016 14ZM30.2602 14C32.5268 14.2 34.3602 15.0333 35.7602 16.5C37.1602 17.9667 37.8602 19.8333 37.8602 22.1C37.8602 24.5667 37.0602 26.6333 35.4602 28.3C33.9268 29.9 31.9935 30.7 29.6602 30.7C26.9935 30.7 24.8602 29.7667 23.2602 27.9C21.6602 25.9667 20.8602 23.2 20.8602 19.6C20.8602 12.6 23.3268 6.53333 28.2602 1.4C29.1935 0.466663 30.2602 -3.8147e-06 31.4602 -3.8147e-06C32.5935 -3.8147e-06 33.5935 0.399997 34.4602 1.2C35.3268 1.93333 35.7602 2.83333 35.7602 3.9C35.7602 4.83333 35.3935 5.7 34.6602 6.5C32.4602 8.83333 30.9935 11.3333 30.2602 14Z" fill="currentColor" />
</svg>
<figure class="mt-4">
<blockquote class="text-center text-xl font-semibold leading-8 text-gray-900 sm:text-2xl sm:leading-9">
<p>Working with Gotham Innovations has been a fantastic experience. Their innovative spirit and dedication to excellence align perfectly with our mission at DarkLabs. Collaborating with James and his team has led to some truly exciting breakthroughs. It’s partnerships like these that fuel my passion for what I do.</p>
</blockquote>
<figcaption class="mt-10">
<div class="flex justify-center rounded-full">
<div class="relative">
<span aria-hidden="true" class="absolute inset-0 h-16 w-16 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
</div>
<div class="mt-4 text-center text-xl font-semibold text-gray-900">Emily Harper</div>
<div class="text-center text-lg font-normal text-gray-600">Lead Scientist at DarkLabs</div>
</figcaption>
</figure>
</div>
</section><section class="relative isolate overflow-hidden bg-gray-50 py-24 sm:py-32">
<div class="absolute -left-[30rem] -top-[25rem] -z-10 aspect-square h-[50rem] rounded-full shadow-2xl shadow-gray-500/10"></div>
<div class="absolute -bottom-[20rem] -right-[32rem] -z-20 aspect-square h-[50rem] rounded-full shadow-2xl shadow-gray-500/20">
<div class="absolute left-1/2 top-1/2 aspect-square h-[30rem] -translate-x-1/2 -translate-y-1/2 rounded-full shadow-2xl shadow-gray-500/30"></div>
</div>
<div class="mx-auto flex max-w-7xl flex-col items-center justify-center gap-x-8 gap-y-10 px-6 lg:flex-row lg:px-8">
<div class="lg:flex-none">
<div class="aspect-[4/3] w-full max-w-2xl overflow-clip rounded-2xl lg:aspect-[3/4] lg:h-96 lg:w-auto lg:max-w-none">
<img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&w=672&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
</div>
</div>
<div class="w-full max-w-2xl lg:max-w-none lg:flex-auto lg:px-8">
<figure>
<svg class="h-10 w-10 text-gray-900/10" viewBox="0 0 38 31" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M9.56016 14C11.8268 14.2 13.6602 15.0333 15.0602 16.5C16.4602 17.9667 17.1602 19.8333 17.1602 22.1C17.1602 24.5667 16.3602 26.6333 14.7602 28.3C13.2268 29.9 11.2935 30.7 8.96016 30.7C6.29349 30.7 4.16016 29.7667 2.56016 27.9C0.960157 25.9667 0.160156 23.2 0.160156 19.6C0.160156 12.6 2.62682 6.53333 7.56016 1.4C8.49349 0.466663 9.56016 -3.8147e-06 10.7602 -3.8147e-06C11.8935 -3.8147e-06 12.8935 0.399997 13.7602 1.2C14.6268 1.93333 15.0602 2.83333 15.0602 3.9C15.0602 4.83333 14.6935 5.7 13.9602 6.5C11.7602 8.83333 10.2935 11.3333 9.56016 14ZM30.2602 14C32.5268 14.2 34.3602 15.0333 35.7602 16.5C37.1602 17.9667 37.8602 19.8333 37.8602 22.1C37.8602 24.5667 37.0602 26.6333 35.4602 28.3C33.9268 29.9 31.9935 30.7 29.6602 30.7C26.9935 30.7 24.8602 29.7667 23.2602 27.9C21.6602 25.9667 20.8602 23.2 20.8602 19.6C20.8602 12.6 23.3268 6.53333 28.2602 1.4C29.1935 0.466663 30.2602 -3.8147e-06 31.4602 -3.8147e-06C32.5935 -3.8147e-06 33.5935 0.399997 34.4602 1.2C35.3268 1.93333 35.7602 2.83333 35.7602 3.9C35.7602 4.83333 35.3935 5.7 34.6602 6.5C32.4602 8.83333 30.9935 11.3333 30.2602 14Z" fill="currentColor" />
</svg>
<blockquote class="mt-4 text-xl font-semibold leading-8 text-gray-900 sm:text-2xl sm:leading-9">
<p>Working with Gotham Innovations has been a game-changer. James and his team consistently push the envelope, making collaboration both rewarding and impactful. Their commitment to innovation is unmatched.</p>
</blockquote>
<figcaption class="mt-8">
<div class="text-xl font-semibold text-gray-900">Michael Kane</div>
<div class="text-lg font-normal text-gray-600">CTO at BatSignal</div>
</figcaption>
</figure>
</div>
</div>
</section><section class="bg-white py-24 sm:py-32 lg:py-40">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:grid lg:max-w-none lg:grid-cols-12 lg:gap-8">
<div class="lg:col-span-5">
<h2 class="mx-auto max-w-xl text-center text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl lg:mx-0 lg:max-w-none lg:text-start">Hear firsthand accounts and praise from clients</h2>
</div>
<div class="mt-16 lg:col-span-7 lg:mt-0">
<div class="divide-y divide-gray-900/10 *:py-10 md:*:py-12">
<div class="first:pt-0 last:pb-0">
<figure class="flex flex-col gap-y-8 md:gap-y-6">
<figcaption class="order-last flex flex-col items-center justify-between gap-4 md:order-first md:flex-row">
<div class="flex flex-col items-center gap-4 md:flex-row">
<div class="relative rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-14 w-14 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-14 w-14 rounded-full object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div class="text-center md:text-start">
<div class="text-lg font-semibold text-gray-900">Emily Harper</div>
<div class="text-base font-normal text-gray-600">Lead Scientist at DarkLabs</div>
</div>
</div>
<div>
<img alt="" src="https://htmlwind.com/assets/images/logo-darklabs.png" class="h-10 w-auto grayscale" />
</div>
</figcaption>
<blockquote class="text-center text-lg leading-8 text-gray-900 md:text-start">
<p>“Working with Gotham Innovations has been a fantastic experience. Their innovative spirit and dedication to excellence align perfectly with our mission at DarkLabs. Collaborating with James and his team has led to some truly exciting breakthroughs. It’s partnerships like these that fuel my passion for what I do.”</p>
</blockquote>
</figure>
</div>
<div class="first:pt-0 last:pb-0">
<figure class="flex flex-col gap-y-8 md:gap-y-6">
<figcaption class="order-last flex flex-col items-center justify-between gap-4 md:order-first md:flex-row">
<div class="flex flex-col items-center gap-4 md:flex-row">
<div class="relative flex justify-center rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-14 w-14 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-14 w-14 rounded-full object-cover" src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div class="text-center md:text-start">
<div class="text-lg font-semibold text-gray-900">Michael Kane</div>
<div class="text-base font-normal text-gray-600">CTO at BatSignal</div>
</div>
</div>
<div>
<img alt="" src="https://htmlwind.com/assets/images/logo-batsignal.png" class="h-10 w-auto grayscale" />
</div>
</figcaption>
<blockquote class="text-center text-lg leading-8 text-gray-900 md:text-start">
<p>“Working with Gotham Innovations has been a game-changer. James and his team consistently push the envelope, making collaboration both rewarding and impactful. Their commitment to innovation is unmatched.”</p>
</blockquote>
</figure>
</div>
<div class="first:pt-0 last:pb-0">
<figure class="flex flex-col gap-y-8 md:gap-y-6">
<figcaption class="order-last flex flex-col items-center justify-between gap-4 md:order-first md:flex-row">
<div class="flex flex-col items-center gap-4 md:flex-row">
<div class="relative flex justify-center rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-14 w-14 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-14 w-14 rounded-full object-cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div class="text-center md:text-start">
<div class="text-lg font-semibold text-gray-900">Sophia Lane</div>
<div class="text-base font-normal text-gray-600">Director of R&D at GothCorp</div>
</div>
</div>
<div>
<img alt="" src="https://htmlwind.com/assets/images/logo-gothcorp.png" class="h-10 w-auto grayscale" />
</div>
</figcaption>
<blockquote class="text-center text-lg leading-8 text-gray-900 md:text-start">
<p>“Collaborating with Gotham Innovations has been an outstanding experience. Their innovative approach and technical expertise have truly elevated our projects. It's a pleasure working with such a forward-thinking team.”</p>
</blockquote>
</figure>
</div>
</div>
</div>
</div>
</div>
</section><section class="bg-gray-900 py-24 sm:py-32 lg:py-40">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:grid lg:max-w-none lg:grid-cols-12 lg:gap-8">
<div class="lg:col-span-5">
<h2 class="mx-auto max-w-xl text-center text-4xl font-semibold tracking-tight text-white sm:text-5xl lg:mx-0 lg:max-w-none lg:text-start">Hear firsthand accounts and praise from clients</h2>
</div>
<div class="mt-16 lg:col-span-7 lg:mt-0">
<div class="divide-y divide-white/10 *:py-10 md:*:py-12">
<div class="first:pt-0 last:pb-0">
<figure class="flex flex-col gap-y-8 md:gap-y-6">
<figcaption class="order-last flex flex-col items-center justify-between gap-4 md:order-first md:flex-row">
<div class="flex flex-col items-center gap-4 md:flex-row">
<div class="relative rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-14 w-14 rounded-full ring-1 ring-inset ring-white/10"></span>
<img alt="" class="h-14 w-14 rounded-full object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div class="text-center md:text-start">
<div class="text-lg font-semibold text-white">Emily Harper</div>
<div class="text-base font-normal text-gray-300">Lead Scientist at DarkLabs</div>
</div>
</div>
<div>
<img alt="" src="https://htmlwind.com/assets/images/logo-darklabs-white.png" class="h-10 w-auto grayscale" />
</div>
</figcaption>
<blockquote class="text-center text-lg leading-8 text-white md:text-start">
<p>“Working with Gotham Innovations has been a fantastic experience. Their innovative spirit and dedication to excellence align perfectly with our mission at DarkLabs. Collaborating with James and his team has led to some truly exciting breakthroughs. It’s partnerships like these that fuel my passion for what I do.”</p>
</blockquote>
</figure>
</div>
<div class="first:pt-0 last:pb-0">
<figure class="flex flex-col gap-y-8 md:gap-y-6">
<figcaption class="order-last flex flex-col items-center justify-between gap-4 md:order-first md:flex-row">
<div class="flex flex-col items-center gap-4 md:flex-row">
<div class="relative flex justify-center rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-14 w-14 rounded-full ring-1 ring-inset ring-white/10"></span>
<img alt="" class="h-14 w-14 rounded-full object-cover" src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div class="text-center md:text-start">
<div class="text-lg font-semibold text-white">Michael Kane</div>
<div class="text-base font-normal text-gray-300">CTO at BatSignal</div>
</div>
</div>
<div>
<img alt="" src="https://htmlwind.com/assets/images/logo-batsignal-white.png" class="h-10 w-auto grayscale" />
</div>
</figcaption>
<blockquote class="text-center text-lg leading-8 text-white md:text-start">
<p>“Working with Gotham Innovations has been a game-changer. James and his team consistently push the envelope, making collaboration both rewarding and impactful. Their commitment to innovation is unmatched.”</p>
</blockquote>
</figure>
</div>
<div class="first:pt-0 last:pb-0">
<figure class="flex flex-col gap-y-8 md:gap-y-6">
<figcaption class="order-last flex flex-col items-center justify-between gap-4 md:order-first md:flex-row">
<div class="flex flex-col items-center gap-4 md:flex-row">
<div class="relative flex justify-center rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-14 w-14 rounded-full ring-1 ring-inset ring-white/10"></span>
<img alt="" class="h-14 w-14 rounded-full object-cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div class="text-center md:text-start">
<div class="text-lg font-semibold text-white">Sophia Lane</div>
<div class="text-base font-normal text-gray-300">Director of R&D at GothCorp</div>
</div>
</div>
<div>
<img alt="" src="https://htmlwind.com/assets/images/logo-gothcorp-white.png" class="h-10 w-auto grayscale" />
</div>
</figcaption>
<blockquote class="text-center text-lg leading-8 text-white md:text-start">
<p>“Collaborating with Gotham Innovations has been an outstanding experience. Their innovative approach and technical expertise have truly elevated our projects. It's a pleasure working with such a forward-thinking team.”</p>
</blockquote>
</figure>
</div>
</div>
</div>
</div>
</div>
</section><section class="bg-white py-24 sm:py-32">
<div class="relative isolate mx-auto max-w-7xl px-6 pt-8 lg:px-8">
<div class="absolute top-0 -z-10 before:absolute before:left-1/2 before:top-1/2 before:block before:h-24 before:w-24 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-gray-200">
<svg class="h-6 w-6 rotate-180 text-white" viewBox="0 0 38 31" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M9.56016 14C11.8268 14.2 13.6602 15.0333 15.0602 16.5C16.4602 17.9667 17.1602 19.8333 17.1602 22.1C17.1602 24.5667 16.3602 26.6333 14.7602 28.3C13.2268 29.9 11.2935 30.7 8.96016 30.7C6.29349 30.7 4.16016 29.7667 2.56016 27.9C0.960157 25.9667 0.160156 23.2 0.160156 19.6C0.160156 12.6 2.62682 6.53333 7.56016 1.4C8.49349 0.466663 9.56016 -3.8147e-06 10.7602 -3.8147e-06C11.8935 -3.8147e-06 12.8935 0.399997 13.7602 1.2C14.6268 1.93333 15.0602 2.83333 15.0602 3.9C15.0602 4.83333 14.6935 5.7 13.9602 6.5C11.7602 8.83333 10.2935 11.3333 9.56016 14ZM30.2602 14C32.5268 14.2 34.3602 15.0333 35.7602 16.5C37.1602 17.9667 37.8602 19.8333 37.8602 22.1C37.8602 24.5667 37.0602 26.6333 35.4602 28.3C33.9268 29.9 31.9935 30.7 29.6602 30.7C26.9935 30.7 24.8602 29.7667 23.2602 27.9C21.6602 25.9667 20.8602 23.2 20.8602 19.6C20.8602 12.6 23.3268 6.53333 28.2602 1.4C29.1935 0.466663 30.2602 -3.8147e-06 31.4602 -3.8147e-06C32.5935 -3.8147e-06 33.5935 0.399997 34.4602 1.2C35.3268 1.93333 35.7602 2.83333 35.7602 3.9C35.7602 4.83333 35.3935 5.7 34.6602 6.5C32.4602 8.83333 30.9935 11.3333 30.2602 14Z" fill="currentColor"></path>
</svg>
</div>
<h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:max-w-md sm:text-5xl">What our customer are saying</h2>
<div class="divide mt-16 grid grid-cols-1 divide-y divide-gray-900/10 lg:grid-cols-2 lg:divide-x lg:divide-y-0">
<div class="flex flex-col pb-10 sm:pb-12 lg:pb-0 lg:pr-8 xl:pr-20">
<img alt="" src="https://htmlwind.com/assets/images/logo-darklabs.png" class="h-12 w-auto self-start" />
<figure class="mt-6 flex flex-auto flex-col justify-between">
<blockquote class="text-lg leading-8 text-gray-900">
<p>“Working with Gotham Innovations has been a fantastic experience. Their innovative spirit and dedication to excellence align perfectly with our mission at DarkLabs. Collaborating with James and his team has led to some truly exciting breakthroughs.”</p>
</blockquote>
<figcaption class="mt-10">
<div class="flex items-center gap-x-4">
<div class="relative flex-none rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-14 w-14 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-14 w-14 rounded-full object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div>
<div class="text-lg font-semibold text-gray-900">Emily Harper</div>
<div class="text-base font-normal text-gray-600">Lead Scientist at DarkLabs</div>
</div>
</div>
</figcaption>
</figure>
</div>
<div class="flex flex-col pt-10 sm:pt-12 lg:pl-8 lg:pt-0 xl:pl-20">
<img alt="" src="https://htmlwind.com/assets/images/logo-batsignal.png" class="h-12 w-auto self-start" />
<figure class="mt-6 flex flex-auto flex-col justify-between">
<blockquote class="text-lg leading-8 text-gray-900">
<p>“Working with Gotham Innovations has been a game-changer. James and his team consistently push the envelope, making collaboration both rewarding and impactful. Their commitment to innovation is unmatched.”</p>
</blockquote>
<figcaption class="mt-10">
<div class="flex items-center gap-x-4">
<div class="relative flex-none rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-14 w-14 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-14 w-14 rounded-full object-cover" src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div>
<div class="text-lg font-semibold text-gray-900">Michael Kane</div>
<div class="text-base font-normal text-gray-600">CTO at BatSignal</div>
</div>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
</section><section class="bg-gray-900 py-24 sm:py-32">
<div class="relative isolate mx-auto max-w-7xl px-6 pt-8 lg:px-8">
<div class="absolute top-0 -z-10 before:absolute before:left-1/2 before:top-1/2 before:block before:h-24 before:w-24 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-gray-700">
<svg class="h-6 w-6 rotate-180 text-gray-900" viewBox="0 0 38 31" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M9.56016 14C11.8268 14.2 13.6602 15.0333 15.0602 16.5C16.4602 17.9667 17.1602 19.8333 17.1602 22.1C17.1602 24.5667 16.3602 26.6333 14.7602 28.3C13.2268 29.9 11.2935 30.7 8.96016 30.7C6.29349 30.7 4.16016 29.7667 2.56016 27.9C0.960157 25.9667 0.160156 23.2 0.160156 19.6C0.160156 12.6 2.62682 6.53333 7.56016 1.4C8.49349 0.466663 9.56016 -3.8147e-06 10.7602 -3.8147e-06C11.8935 -3.8147e-06 12.8935 0.399997 13.7602 1.2C14.6268 1.93333 15.0602 2.83333 15.0602 3.9C15.0602 4.83333 14.6935 5.7 13.9602 6.5C11.7602 8.83333 10.2935 11.3333 9.56016 14ZM30.2602 14C32.5268 14.2 34.3602 15.0333 35.7602 16.5C37.1602 17.9667 37.8602 19.8333 37.8602 22.1C37.8602 24.5667 37.0602 26.6333 35.4602 28.3C33.9268 29.9 31.9935 30.7 29.6602 30.7C26.9935 30.7 24.8602 29.7667 23.2602 27.9C21.6602 25.9667 20.8602 23.2 20.8602 19.6C20.8602 12.6 23.3268 6.53333 28.2602 1.4C29.1935 0.466663 30.2602 -3.8147e-06 31.4602 -3.8147e-06C32.5935 -3.8147e-06 33.5935 0.399997 34.4602 1.2C35.3268 1.93333 35.7602 2.83333 35.7602 3.9C35.7602 4.83333 35.3935 5.7 34.6602 6.5C32.4602 8.83333 30.9935 11.3333 30.2602 14Z" fill="currentColor"></path>
</svg>
</div>
<h2 class="text-4xl font-semibold tracking-tight text-white sm:max-w-md sm:text-5xl">What our customer are saying</h2>
<div class="divide mt-16 grid grid-cols-1 divide-y divide-white/10 lg:grid-cols-2 lg:divide-x lg:divide-y-0">
<div class="flex flex-col pb-10 sm:pb-12 lg:pb-0 lg:pr-8 xl:pr-20">
<img alt="" src="https://htmlwind.com/assets/images/logo-darklabs-white.png" class="h-12 w-auto self-start" />
<figure class="mt-6 flex flex-auto flex-col justify-between">
<blockquote class="text-lg leading-8 text-white">
<p>“Working with Gotham Innovations has been a fantastic experience. Their innovative spirit and dedication to excellence align perfectly with our mission at DarkLabs. Collaborating with James and his team has led to some truly exciting breakthroughs.”</p>
</blockquote>
<figcaption class="mt-10">
<div class="flex items-center gap-x-4">
<div class="relative flex-none rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-14 w-14 rounded-full ring-1 ring-inset ring-white/10"></span>
<img alt="" class="h-14 w-14 rounded-full object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div>
<div class="text-lg font-semibold text-white">Emily Harper</div>
<div class="text-base font-normal text-gray-300">Lead Scientist at DarkLabs</div>
</div>
</div>
</figcaption>
</figure>
</div>
<div class="flex flex-col pt-10 sm:pt-12 lg:pl-8 lg:pt-0 xl:pl-20">
<img alt="" src="https://htmlwind.com/assets/images/logo-batsignal-white.png" class="h-12 w-auto self-start" />
<figure class="mt-6 flex flex-auto flex-col justify-between">
<blockquote class="text-lg leading-8 text-white">
<p>“Working with Gotham Innovations has been a game-changer. James and his team consistently push the envelope, making collaboration both rewarding and impactful. Their commitment to innovation is unmatched.”</p>
</blockquote>
<figcaption class="mt-10">
<div class="flex items-center gap-x-4">
<div class="relative flex-none rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-14 w-14 rounded-full ring-1 ring-inset ring-white/10"></span>
<img alt="" class="h-14 w-14 rounded-full object-cover" src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div>
<div class="text-lg font-semibold text-white">Michael Kane</div>
<div class="text-base font-normal text-gray-300">CTO at BatSignal</div>
</div>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
</section><section class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:grid lg:max-w-none lg:grid-cols-12">
<div class="self-center lg:order-1 lg:col-span-5">
<h2 class="text-lg font-semibold leading-8 text-pink-500 lg:hidden">Testimonial</h2>
<div class="relative isolate mt-4 aspect-square w-full overflow-clip rounded-3xl sm:aspect-[4/3] lg:mt-0 lg:aspect-square">
<img class="absolute -z-10 h-full w-full object-cover" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=1200&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div class="flex h-full items-end justify-start p-4">
<div class="flex flex-col items-center justify-center gap-y-0.5 rounded-2xl bg-white px-4 py-2.5 shadow-sm sm:gap-y-1.5 sm:px-6 sm:py-4">
<div class="flex gap-x-0.5">
<svg class="h-4 w-4 text-pink-500 sm:h-5 sm:w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8532 4.13112C11.2884 3.12751 12.7117 3.12752 13.1469 4.13112L15.1266 8.69665L20.0805 9.16869C21.1695 9.27246 21.6093 10.626 20.7893 11.3501L17.059 14.6438L18.1408 19.501C18.3787 20.5688 17.2272 21.4053 16.2853 20.8492L12 18.3193L7.71482 20.8492C6.77284 21.4053 5.62141 20.5688 5.85923 19.501L6.94111 14.6438L3.21082 11.3501C2.39082 10.626 2.83063 9.27246 3.91959 9.16869L8.87345 8.69665L10.8532 4.13112Z" fill="currentColor" />
</svg>
<svg class="h-4 w-4 text-pink-500 sm:h-5 sm:w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8532 4.13112C11.2884 3.12751 12.7117 3.12752 13.1469 4.13112L15.1266 8.69665L20.0805 9.16869C21.1695 9.27246 21.6093 10.626 20.7893 11.3501L17.059 14.6438L18.1408 19.501C18.3787 20.5688 17.2272 21.4053 16.2853 20.8492L12 18.3193L7.71482 20.8492C6.77284 21.4053 5.62141 20.5688 5.85923 19.501L6.94111 14.6438L3.21082 11.3501C2.39082 10.626 2.83063 9.27246 3.91959 9.16869L8.87345 8.69665L10.8532 4.13112Z" fill="currentColor" />
</svg>
<svg class="h-4 w-4 text-pink-500 sm:h-5 sm:w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8532 4.13112C11.2884 3.12751 12.7117 3.12752 13.1469 4.13112L15.1266 8.69665L20.0805 9.16869C21.1695 9.27246 21.6093 10.626 20.7893 11.3501L17.059 14.6438L18.1408 19.501C18.3787 20.5688 17.2272 21.4053 16.2853 20.8492L12 18.3193L7.71482 20.8492C6.77284 21.4053 5.62141 20.5688 5.85923 19.501L6.94111 14.6438L3.21082 11.3501C2.39082 10.626 2.83063 9.27246 3.91959 9.16869L8.87345 8.69665L10.8532 4.13112Z" fill="currentColor" />
</svg>
<svg class="h-4 w-4 text-pink-500 sm:h-5 sm:w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8532 4.13112C11.2884 3.12751 12.7117 3.12752 13.1469 4.13112L15.1266 8.69665L20.0805 9.16869C21.1695 9.27246 21.6093 10.626 20.7893 11.3501L17.059 14.6438L18.1408 19.501C18.3787 20.5688 17.2272 21.4053 16.2853 20.8492L12 18.3193L7.71482 20.8492C6.77284 21.4053 5.62141 20.5688 5.85923 19.501L6.94111 14.6438L3.21082 11.3501C2.39082 10.626 2.83063 9.27246 3.91959 9.16869L8.87345 8.69665L10.8532 4.13112Z" fill="currentColor" />
</svg>
<svg class="h-4 w-4 text-pink-500 sm:h-5 sm:w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8532 4.13112C11.2884 3.12751 12.7117 3.12752 13.1469 4.13112L15.1266 8.69665L20.0805 9.16869C21.1695 9.27246 21.6093 10.626 20.7893 11.3501L17.059 14.6438L18.1408 19.501C18.3787 20.5688 17.2272 21.4053 16.2853 20.8492L12 18.3193L7.71482 20.8492C6.77284 21.4053 5.62141 20.5688 5.85923 19.501L6.94111 14.6438L3.21082 11.3501C2.39082 10.626 2.83063 9.27246 3.91959 9.16869L8.87345 8.69665L10.8532 4.13112Z" fill="currentColor" />
</svg>
</div>
<p class="text-sm font-semibold leading-7 text-gray-900 sm:text-base">5 out of 5 stars</p>
</div>
</div>
</div>
</div>
<div class="mt-8 self-center lg:col-span-7 lg:mt-0 lg:pr-20 xl:pr-24">
<h2 class="hidden text-lg font-semibold leading-8 text-pink-500 lg:block">Testimonial</h2>
<figure class="lg:mt-4">
<blockquote class="text-xl font-semibold leading-8 text-gray-900 sm:text-2xl sm:leading-9">
<p>“Working with Emily and her team has been an absolute pleasure. Her ability to combine technical expertise with innovative thinking has consistently driven our projects to new heights. Emily's leadership and problem-solving skills have been instrumental in overcoming challenges and achieving remarkable results. Collaborating with her has been a rewarding experience, and I deeply appreciate the dedication and creativity she brings to every project.”</p>
</blockquote>
<figcaption class="mt-8">
<div class="text-base font-semibold text-gray-900">Lila Bennett</div>
<div class="text-base font-normal text-gray-600">CEO at PrismCore</div>
</figcaption>
</figure>
</div>
</div>
</div>
</section><div class="relative isolate overflow-hidden bg-white py-24 sm:py-32">
<div aria-hidden="true" class="absolute left-1/2 top-72 -z-20 h-[40rem] w-[40rem] -translate-x-1/2 rounded-full bg-gradient-to-b from-pink-400 to-amber-300/40 opacity-75 blur-[8rem]"></div>
<div aria-hidden="true" class="absolute left-1/2 top-60 -z-10 h-80 w-80 rounded-full bg-gradient-to-b from-pink-500 to-amber-400/40 opacity-75 blur-3xl"></div>
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<h2 class="text-center text-lg font-semibold leading-8 text-pink-500">Testimonials</h2>
<p class="mx-auto mt-2 max-w-xl text-center text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Find out how our users are spreading the word!</p>
<div class="mx-auto mt-16 flow-root max-w-2xl sm:mt-20 lg:max-w-none">
<div class="-mt-8 gap-x-8 sm:columns-2 sm:text-[0] lg:columns-3">
<div class="inline-block w-full pt-8">
<figure class="rounded-3xl bg-white p-8 shadow-md ring-1 ring-inset ring-gray-900/5">
<figcaption class="flex justify-between">
<div class="flex items-center justify-start gap-x-3">
<div class="relative flex-none rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-12 w-12 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-12 w-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div>
<div class="text-base font-semibold text-gray-900">Alex Rivera</div>
<div class="text-base font-normal text-gray-600">@alexrivera</div>
</div>
</div>
<div class="flex-none">
<svg class="h-6 w-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
<path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717 l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339 l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z" />
</svg>
</div>
</figcaption>
<blockquote class="mt-6 text-base text-gray-900">
<p>“This tool has truly transformed the way we work. It's intuitive, efficient, and has made a significant impact on our productivity. Highly recommended!”</p>
</blockquote>
</figure>
</div>
<div class="inline-block w-full pt-8">
<figure class="rounded-3xl bg-white p-8 shadow-md ring-1 ring-inset ring-gray-900/5">
<figcaption class="flex justify-between">
<div class="flex items-center justify-start gap-x-3">
<div class="relative flex-none rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-12 w-12 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-12 w-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div>
<div class="text-base font-semibold text-gray-900">Jamie Lee</div>
<div class="text-base font-normal text-gray-600">@jamielee</div>
</div>
</div>
<div class="flex-none">
<svg class="h-6 w-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
<path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717 l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339 l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z" />
</svg>
</div>
</figcaption>
<blockquote class="mt-6 text-base text-gray-900">
<p>“An exceptional product that delivers on its promises. It's easy to use and has made a big difference in how we manage our tasks and projects.”</p>
</blockquote>
</figure>
</div>
<div class="inline-block w-full pt-8">
<figure class="rounded-3xl bg-white p-8 shadow-md ring-1 ring-inset ring-gray-900/5">
<figcaption class="flex justify-between">
<div class="flex items-center justify-start gap-x-3">
<div class="relative flex-none rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-12 w-12 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-12 w-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1514626585111-9aa86183ac98?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div>
<div class="text-base font-semibold text-gray-900">Taylor Morgan</div>
<div class="text-base font-normal text-gray-600">@taylormorgan</div>
</div>
</div>
<div class="flex-none">
<svg class="h-6 w-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
<path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717 l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339 l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z" />
</svg>
</div>
</figcaption>
<blockquote class="mt-6 text-base text-gray-900">
<p>“A fantastic solution that has streamlined our processes and improved our workflow. The user experience is top-notch, and the results have been outstanding.”</p>
</blockquote>
</figure>
</div>
<div class="inline-block w-full pt-8">
<figure class="rounded-3xl bg-white p-8 shadow-md ring-1 ring-inset ring-gray-900/5">
<figcaption class="flex justify-between">
<div class="flex items-center justify-start gap-x-3">
<div class="relative flex-none rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-12 w-12 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-12 w-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1492106087820-71f1a00d2b11?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div>
<div class="text-base font-semibold text-gray-900">Casey Blake</div>
<div class="text-base font-normal text-gray-600">@caseyblake</div>
</div>
</div>
<div class="flex-none">
<svg class="h-6 w-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
<path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717 l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339 l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z" />
</svg>
</div>
</figcaption>
<blockquote class="mt-6 text-base text-gray-900">
<p>“This has been a game-changer for our team. The efficiency and ease of use have been impressive, and it's made managing our work so much smoother.”</p>
</blockquote>
</figure>
</div>
<div class="inline-block w-full pt-8">
<figure class="rounded-3xl bg-white p-8 shadow-md ring-1 ring-inset ring-gray-900/5">
<figcaption class="flex justify-between">
<div class="flex items-center justify-start gap-x-3">
<div class="relative flex-none rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-12 w-12 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-12 w-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1499996860823-5214fcc65f8f?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div>
<div class="text-base font-semibold text-gray-900">Jordan Kim</div>
<div class="text-base font-normal text-gray-600">@jordankim</div>
</div>
</div>
<div class="flex-none">
<svg class="h-6 w-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
<path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717 l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339 l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z" />
</svg>
</div>
</figcaption>
<blockquote class="mt-6 text-base text-gray-900">
<p>“I couldn't be happier with this tool. It’s user-friendly, effective, and has significantly boosted our team's productivity and collaboration.”</p>
</blockquote>
</figure>
</div>
<div class="inline-block w-full pt-8">
<figure class="rounded-3xl bg-white p-8 shadow-md ring-1 ring-inset ring-gray-900/5">
<figcaption class="flex justify-between">
<div class="flex items-center justify-start gap-x-3">
<div class="relative flex-none rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-12 w-12 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-12 w-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div>
<div class="text-base font-semibold text-gray-900">Morgan Taylor</div>
<div class="text-base font-normal text-gray-600">@morgantaylor</div>
</div>
</div>
<div class="flex-none">
<svg class="h-6 w-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
<path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717 l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339 l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z" />
</svg>
</div>
</figcaption>
<blockquote class="mt-6 text-base text-gray-900">
<p>“An invaluable addition to our toolkit. It's reliable, easy to integrate, and has enhanced our overall workflow. Definitely worth considering!”</p>
</blockquote>
</figure>
</div>
</div>
</div>
</div>
</div><div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<h2 class="text-center text-lg font-semibold leading-8 text-pink-500">Testimonials</h2>
<p class="mx-auto mt-2 max-w-xl text-center text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Find out how our users are spreading the word!</p>
<div class="mx-auto mt-16 flow-root max-w-2xl sm:mt-20 lg:max-w-none">
<div class="mx-auto grid max-w-2xl grid-cols-1 grid-rows-1 gap-8 sm:grid-cols-2 xl:mx-0 xl:max-w-none xl:grid-flow-col xl:grid-cols-4">
<div class="rounded-3xl bg-white ring-1 ring-inset ring-gray-900/10 sm:col-span-2 sm:flex xl:col-start-2 xl:row-end-1">
<div class="hidden sm:block sm:w-1/2 sm:flex-none">
<div class="aspect-square w-full overflow-clip rounded-2xl">
<img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&w=672&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
</div>
</div>
<figure class="p-8">
<figcaption class="flex items-center justify-start gap-x-3">
<div class="relative flex-none rounded-full sm:hidden">
<span aria-hidden="true" class="absolute inset-0 h-12 w-12 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-12 w-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div>
<div class="text-base font-semibold text-gray-900">Michael Kane</div>
<div class="text-base font-normal text-gray-600">@michaelkane</div>
</div>
</figcaption>
<blockquote class="mt-6 text-base text-gray-900">
<p>“A top-notch tool that has revolutionized our approach to managing projects. It's user-friendly, reliable, and has substantially improved our team's productivity.”</p>
</blockquote>
</figure>
</div>
<div class="space-y-8 xl:contents xl:space-y-0">
<div class="space-y-8 xl:row-span-2">
<figure class="rounded-3xl bg-white p-8 ring-1 ring-inset ring-gray-900/10">
<figcaption class="flex items-center justify-start gap-x-3">
<div class="relative flex-none rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-12 w-12 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-12 w-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div>
<div class="text-base font-semibold text-gray-900">Alex Rivera</div>
<div class="text-base font-normal text-gray-600">@alexrivera</div>
</div>
</figcaption>
<blockquote class="mt-6 text-base text-gray-900">
<p>“This tool has truly transformed the way we work. It's intuitive, efficient, and has made a significant impact on our productivity.”</p>
</blockquote>
</figure>
<figure class="rounded-3xl bg-white p-8 ring-1 ring-inset ring-gray-900/10">
<figcaption class="flex items-center justify-start gap-x-3">
<div class="relative flex-none rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-12 w-12 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-12 w-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div>
<div class="text-base font-semibold text-gray-900">Jamie Lee</div>
<div class="text-base font-normal text-gray-600">@jamielee</div>
</div>
</figcaption>
<blockquote class="mt-6 text-base text-gray-900">
<p>“An exceptional product that delivers on its promises. It's easy to use and has made a big difference in how we manage our tasks.”</p>
</blockquote>
</figure>
<figure class="rounded-3xl bg-white p-8 ring-1 ring-inset ring-gray-900/10">
<figcaption class="flex items-center justify-start gap-x-3">
<div class="relative flex-none rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-12 w-12 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-12 w-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1591295967474-278e1aa10ecd?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div>
<div class="text-base font-semibold text-gray-900">Jordan Avery</div>
<div class="text-base font-normal text-gray-600">@jordanavery</div>
</div>
</figcaption>
<blockquote class="mt-6 text-base text-gray-900">
<p>“This platform has been a game-changer for our team. The seamless integration and user-friendly interface have greatly enhanced our workflow and productivity.”</p>
</blockquote>
</figure>
</div>
<div class="space-y-8 xl:row-start-1">
<figure class="rounded-3xl bg-white p-8 ring-1 ring-inset ring-gray-900/10">
<figcaption class="flex items-center justify-start gap-x-3">
<div class="relative flex-none rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-12 w-12 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-12 w-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1514626585111-9aa86183ac98?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div>
<div class="text-base font-semibold text-gray-900">Taylor Morgan</div>
<div class="text-base font-normal text-gray-600">@taylormorgan</div>
</div>
</figcaption>
<blockquote class="mt-6 text-base text-gray-900">
<p>“A fantastic solution that has streamlined our processes and improved our workflow. The user experience is top-notch, and the results have been outstanding.”</p>
</blockquote>
</figure>
<figure class="rounded-3xl bg-white p-8 ring-1 ring-inset ring-gray-900/10">
<figcaption class="flex items-center justify-start gap-x-3">
<div class="relative flex-none rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-12 w-12 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-12 w-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1492106087820-71f1a00d2b11?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div>
<div class="text-base font-semibold text-gray-900">Casey Blake</div>
<div class="text-base font-normal text-gray-600">@caseyblake</div>
</div>
</figcaption>
<blockquote class="mt-6 text-base text-gray-900">
<p>“This has been a game-changer for our team. The efficiency and ease of use have been impressive, and it's made managing our work so much smoother.”</p>
</blockquote>
</figure>
</div>
</div>
<div class="space-y-8 xl:contents xl:space-y-0">
<div class="space-y-8 xl:row-start-1">
<figure class="rounded-3xl bg-white p-8 ring-1 ring-inset ring-gray-900/10">
<figcaption class="flex items-center justify-start gap-x-3">
<div class="relative flex-none rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-12 w-12 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-12 w-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1536896407451-6e3dd976edd1?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div>
<div class="text-base font-semibold text-gray-900">Taylor Reed</div>
<div class="text-base font-normal text-gray-600">@taylorreed</div>
</div>
</figcaption>
<blockquote class="mt-6 text-base text-gray-900">
<p>“Exceptional tool with a sleek design and powerful features. It has simplified our processes and made a noticeable difference in our daily operations.”</p>
</blockquote>
</figure>
<figure class="rounded-3xl bg-white p-8 ring-1 ring-inset ring-gray-900/10">
<figcaption class="flex items-center justify-start gap-x-3">
<div class="relative flex-none rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-12 w-12 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-12 w-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1509868918748-a554ad25f858?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div>
<div class="text-base font-semibold text-gray-900">Jamie Quinn</div>
<div class="text-base font-normal text-gray-600">@jamiequinn</div>
</div>
</figcaption>
<blockquote class="mt-6 text-base text-gray-900">
<p>“An outstanding solution that has exceeded our expectations. It's easy to use, reliable, and has significantly improved our team's efficiency.”</p>
</blockquote>
</figure>
</div>
<div class="space-y-8 xl:row-span-2">
<figure class="rounded-3xl bg-white p-8 ring-1 ring-inset ring-gray-900/10">
<figcaption class="flex items-center justify-start gap-x-3">
<div class="relative flex-none rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-12 w-12 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-12 w-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1499996860823-5214fcc65f8f?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div>
<div class="text-base font-semibold text-gray-900">Jordan Kim</div>
<div class="text-base font-normal text-gray-600">@jordankim</div>
</div>
</figcaption>
<blockquote class="mt-6 text-base text-gray-900">
<p>“I couldn't be happier with this tool. It’s user-friendly, effective, and has significantly boosted our team's productivity.”</p>
</blockquote>
</figure>
<figure class="rounded-3xl bg-white p-8 ring-1 ring-inset ring-gray-900/10">
<figcaption class="flex items-center justify-start gap-x-3">
<div class="relative flex-none rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-12 w-12 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-12 w-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div>
<div class="text-base font-semibold text-gray-900">Morgan Taylor</div>
<div class="text-base font-normal text-gray-600">@morgantaylor</div>
</div>
</figcaption>
<blockquote class="mt-6 text-base text-gray-900">
<p>“An invaluable addition to our toolkit. It's reliable, easy to integrate, and has enhanced our overall workflow.”</p>
</blockquote>
</figure>
<figure class="rounded-3xl bg-white p-8 ring-1 ring-inset ring-gray-900/10">
<figcaption class="flex items-center justify-start gap-x-3">
<div class="relative flex-none rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-12 w-12 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-12 w-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</div>
<div>
<div class="text-base font-semibold text-gray-900">Alex Casey</div>
<div class="text-base font-normal text-gray-600">@alexcasey</div>
</div>
</figcaption>
<blockquote class="mt-6 text-base text-gray-900">
<p>“This service has truly optimized our workflow. The intuitive design and robust functionality have made a huge positive impact on our productivity.”</p>
</blockquote>
</figure>
</div>
</div>
</div>
</div>
</div>
</div>Frequently asked questions
-
Quote grids, large single featured quotes, multi-column cards with avatars, testimonials with star ratings, and logo-plus-quote combinations.
-
No. Every testimonial layout here is static HTML and CSS, nothing more. No JavaScript needed at all.
-
The star icons in the component are inline SVGs. Fill them in or leave them outlined by toggling the fill color, it's just a class swap on each star path.
-
Replace the img src with your customer photos. Tailwind's rounded-full and object-cover keep them as clean circular avatars.
Related Tailwind CSS components
More free, copy-paste Tailwind CSS components to use in your projects.