User Testimonial with Carousel Using Tailwind UI
Elevate your financial insights with a meticulously crafted user dashboard featuring dynamic statistic cards, all beautifully designed using Tailwind CSS. inspiration design by Jordan Hughes from Dribbble.
carousel
Loading component...
255 lines
<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">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
<style>
.body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
</style>
<div class="flex flex-col justify-center min-h-screen py-8 bg-gray-200">
<div class="max-w-lg p-4 px-4 mx-auto space-x-4 carousel carousel-center rounded-box sm:px-0">
<div class="carousel-item">
<div class="relative p-6 bg-white shadow-xl ring-1 ring-gray-900/5 sm:max-w-md sm:mx-auto sm:rounded-lg">
<div class="w-full mx-auto">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center space-x-1">
<svg class="w-6 h-6 text-yellow-300" fill="currentColor" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z">
</path>
</svg>
<svg class="w-6 h-6 text-yellow-300" fill="currentColor" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z">
</path>
</svg>
<svg class="w-6 h-6 text-yellow-300" fill="currentColor" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z">
</path>
</svg>
<svg class="w-6 h-6 text-yellow-300" fill="currentColor" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z">
</path>
</svg>
<svg class="w-6 h-6 text-yellow-300" fill="currentColor" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z">
</path>
</svg>
</div>
</div>
<div class="py-2 divide-y divide-gray-300/50">
<div class="flex flex-col space-y-4 text-base leading-7 text-left text-gray-900">
<div class="w-96 sm:w-full">
<h1 class="text-xl font-semibold sm:text-2xl">I can't believe how effective this product is! My
English has advanced leaps and bounds since I started using it.</h1>
</div>
<div class="flex items-start justify-between">
<div
class="flex items-center text-sm text-gray-800 transition-colors duration-200 transform dark:text-gray-300 dark:hover:text-white">
<img class="object-cover w-8 h-8 mx-2 rounded-full"
src="https://images.unsplash.com/photo-1601412436009-d964bd02edbc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=464&q=80"
alt="Avatar">
<div class="mx-1">
<h1 class="text-sm font-semibold text-gray-700 dark:text-gray-200">Sarah Mitchell</h1>
<p class="text-xs text-gray-500 dark:text-gray-400">[email protected]</p>
</div>
</div>
<div class="flex items-center justify-center space-x-2">
<svg class="w-5 h-5 ml-2 fill-current" fill="none" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75"></path>
</svg>
</div>
</div>
<a href="" class="flex items-center text-sm font-medium text-gray-600 hover:text-gray-900">
More customer stories
<svg class="w-5 h-5 ml-2 fill-current" fill="currentColor" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="relative p-6 bg-white shadow-xl ring-1 ring-gray-900/5 sm:max-w-md sm:mx-auto sm:rounded-lg">
<div class="w-full mx-auto">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center space-x-1">
<svg class="w-6 h-6 text-yellow-300" fill="currentColor" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z">
</path>
</svg>
<svg class="w-6 h-6 text-yellow-300" fill="currentColor" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z">
</path>
</svg>
<svg class="w-6 h-6 text-yellow-300" fill="currentColor" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z">
</path>
</svg>
<svg class="w-6 h-6 text-yellow-300" fill="currentColor" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z">
</path>
</svg>
<svg class="w-6 h-6 text-yellow-300" fill="currentColor" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z">
</path>
</svg>
</div>
</div>
<div class="py-2 divide-y divide-gray-300/50">
<div class="flex flex-col space-y-4 text-base leading-7 text-left text-gray-900">
<div class="w-96 sm:w-full">
<h1 class="text-xl font-semibold sm:text-2xl">This English language product is a game-changer! It has
significantly improved my language skills and made learning enjoyable.</h1>
</div>
<div class="flex items-start justify-between">
<div
class="flex items-center text-sm text-gray-800 transition-colors duration-200 transform dark:text-gray-300 dark:hover:text-white">
<img class="object-cover w-8 h-8 mx-2 rounded-full"
src="https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
alt="Avatar">
<div class="mx-1">
<h1 class="text-sm font-semibold text-gray-700 dark:text-gray-200">Michael Ramirez</h1>
<p class="text-xs text-gray-500 dark:text-gray-400">[email protected]</p>
</div>
</div>
<div class="flex items-center justify-center space-x-2">
<svg class="w-5 h-5 ml-2 fill-current" fill="none" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M19.5 12h-15m0 0l6.75 6.75M4.5 12l6.75-6.75"></path>
</svg>
<svg class="w-5 h-5 ml-2 fill-current" fill="none" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75"></path>
</svg>
</div>
</div>
<a href="" class="flex items-center text-sm font-medium text-gray-600 hover:text-gray-900">
More customer stories
<svg class="w-5 h-5 ml-2 fill-current" fill="currentColor" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="relative p-6 bg-white shadow-xl ring-1 ring-gray-900/5 sm:max-w-md sm:mx-auto sm:rounded-lg">
<div class="w-full mx-auto">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center space-x-1">
<svg class="w-6 h-6 text-yellow-300" fill="currentColor" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z">
</path>
</svg>
<svg class="w-6 h-6 text-yellow-300" fill="currentColor" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z">
</path>
</svg>
<svg class="w-6 h-6 text-yellow-300" fill="currentColor" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z">
</path>
</svg>
<svg class="w-6 h-6 text-yellow-300" fill="currentColor" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z">
</path>
</svg>
<svg class="w-6 h-6 text-yellow-300" fill="currentColor" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z">
</path>
</svg>
</div>
</div>
<div class="py-2 divide-y divide-gray-300/50">
<div class="flex flex-col space-y-4 text-base leading-7 text-left text-gray-900">
<div class="w-96 sm:w-full">
<h1 class="text-xl font-semibold sm:text-2xl">As a language enthusiast, I'm thrilled with this
product. It's user-friendly and has helped me build confidence in speaking English fluently.</h1>
</div>
<div class="flex items-start justify-between">
<div
class="flex items-center text-sm text-gray-800 transition-colors duration-200 transform dark:text-gray-300 dark:hover:text-white">
<img class="object-cover w-8 h-8 mx-2 rounded-full"
src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
alt="Avatar">
<div class="mx-1">
<h1 class="text-sm font-semibold text-gray-700 dark:text-gray-200">Emily Johnson</h1>
<p class="text-xs text-gray-500 dark:text-gray-400">[email protected]</p>
</div>
</div>
<div class="flex items-center justify-center space-x-2">
<svg class="w-5 h-5 ml-2 fill-current" fill="none" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M19.5 12h-15m0 0l6.75 6.75M4.5 12l6.75-6.75"></path>
</svg>
</div>
</div>
<a href="" class="flex items-center text-sm font-medium text-gray-600 hover:text-gray-900">
More customer stories
<svg class="w-5 h-5 ml-2 fill-current" fill="currentColor" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>