Customer Testimonial Grid in Dark Mode with Tailwind CSS
Customer Testimonial Grid in Dark Mode with Tailwind CSS
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<section id="testimonies" class="py-20 bg-slate-900">
<div class="max-w-6xl mx-8 md:mx-10 lg:mx-20 xl:mx-auto">
<div class="transition duration-500 ease-in-out transform scale-100 translate-x-0 translate-y-0 opacity-100">
<div class="mb-12 space-y-5 md:mb-16 md:text-center">
<div
class="inline-block px-3 py-1 text-sm font-semibold text-indigo-100 rounded-lg md:text-center text-cn bg-[#202c47] bg-opacity-60 hover:cursor-pointer hover:bg-opacity-40">
Words from Others
</div>
<h1 class="mb-5 text-3xl font-semibold text-white md:text-center md:text-5xl">
It's not just us.
</h1>
<p class="text-xl text-gray-100 md:text-center md:text-2xl">
Here's what others have to say about us.
</p>
</div>
</div>
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8">
<ul class="space-y-8">
<li class="text-sm leading-6">
<div class="relative group">
<div
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
</div><a href="" class="cursor-pointer">
<div
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
<div class="flex items-center space-x-4"><img
src="https://pbs.twimg.com/profile_images/1276461929934942210/cqNhNk6v_400x400.jpg"
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Kanye West">
<div>
<h3 class="text-lg font-semibold text-white">Kanye West</h3>
<p class="text-gray-500 text-md">Rapper & Entrepreneur</p>
</div>
</div>
<p class="leading-normal text-gray-300 text-md">Find God.</p>
</div>
</a>
</div>
</li>
<li class="text-sm leading-6">
<div class="relative group">
<div
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
</div><a href="" class="cursor-pointer">
<div
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
<div class="flex items-center space-x-4"><img
src="https://pbs.twimg.com/profile_images/1535420431766671360/Pwq-1eJc_400x400.jpg"
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Tim Cook">
<div>
<h3 class="text-lg font-semibold text-white">Tim Cook</h3>
<p class="text-gray-500 text-md">CEO of Apple</p>
</div>
</div>
<p class="leading-normal text-gray-300 text-md">Diam quis enim lobortis scelerisque
fermentum dui faucibus in ornare. Donec pretium vulputate sapien nec sagittis
aliquam malesuada bibendum.</p>
</div>
</a>
</div>
</li>
<li class="text-sm leading-6">
<div class="relative group">
<div
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
</div><a href="" class="cursor-pointer">
<div
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
<div class="flex items-center space-x-4"><img
src="https://pbs.twimg.com/profile_images/1276461929934942210/cqNhNk6v_400x400.jpg"
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Kanye West">
<div>
<h3 class="text-lg font-semibold text-white">Kanye West</h3>
<p class="text-gray-500 text-md">Rapper & Entrepreneur</p>
</div>
</div>
<p class="leading-normal text-gray-300 text-md">Find God.</p>
</div>
</a>
</div>
</li>
<li class="text-sm leading-6">
<div class="relative group">
<div
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
</div><a href="" class="cursor-pointer">
<div
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
<div class="flex items-center space-x-4"><img
src="https://pbs.twimg.com/profile_images/1535420431766671360/Pwq-1eJc_400x400.jpg"
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Tim Cook">
<div>
<h3 class="text-lg font-semibold text-white">Tim Cook</h3>
<p class="text-gray-500 text-md">CEO of Apple</p>
</div>
</div>
<p class="leading-normal text-gray-300 text-md">Diam quis enim lobortis scelerisque
fermentum dui faucibus in ornare. Donec pretium vulputate sapien nec sagittis
aliquam malesuada bibendum.</p>
</div>
</a>
</div>
</li>
</ul>
<ul class="hidden space-y-8 sm:block">
<li class="text-sm leading-6">
<div class="relative group">
<div
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
</div><a href="" class="cursor-pointer">
<div
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
<div class="flex items-center space-x-4"><img
src="https://pbs.twimg.com/profile_images/1375285353146327052/y6jeByyD_400x400.jpg"
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Parag Agrawal">
<div>
<h3 class="text-lg font-semibold text-white">Parag Agrawal</h3>
<p class="text-gray-500 text-md">CEO of Twitter</p>
</div>
</div>
<p class="leading-normal text-gray-300 text-md">Enim neque volutpat ac tincidunt vitae
semper. Mattis aliquam faucibus purus in massa tempor. Neque vitae tempus quam
pellentesque nec. Turpis cursus in hac habitasse platea dictumst.</p>
</div>
</a>
</div>
</li>
<li class="text-sm leading-6">
<div class="relative group">
<div
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
</div><a href="" class="cursor-pointer">
<div
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
<div class="flex items-center space-x-4"><img
src="https://pbs.twimg.com/profile_images/1535420431766671360/Pwq-1eJc_400x400.jpg"
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Tim Cook">
<div>
<h3 class="text-lg font-semibold text-white">Tim Cook</h3>
<p class="text-gray-500 text-md">CEO of Apple</p>
</div>
</div>
<p class="leading-normal text-gray-300 text-md">Diam quis enim lobortis scelerisque
fermentum dui faucibus in ornare. Donec pretium vulputate sapien nec sagittis
aliquam malesuada bibendum.</p>
</div>
</a>
</div>
</li>
<li class="text-sm leading-6">
<div class="relative group">
<div
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
</div><a href="" class="cursor-pointer">
<div
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
<div class="flex items-center space-x-4"><img
src="https://pbs.twimg.com/profile_images/1375285353146327052/y6jeByyD_400x400.jpg"
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Parag Agrawal">
<div>
<h3 class="text-lg font-semibold text-white">Parag Agrawal</h3>
<p class="text-gray-500 text-md">CEO of Twitter</p>
</div>
</div>
<p class="leading-normal text-gray-300 text-md">Enim neque volutpat ac tincidunt vitae
semper. Mattis aliquam faucibus purus in massa tempor. Neque vitae tempus quam
pellentesque nec. Turpis cursus in hac habitasse platea dictumst.</p>
</div>
</a>
</div>
</li>
<li class="text-sm leading-6">
<div class="relative group">
<div
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
</div><a href="" class="cursor-pointer">
<div
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
<div class="flex items-center space-x-4"><img
src="https://pbs.twimg.com/profile_images/1535420431766671360/Pwq-1eJc_400x400.jpg"
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Tim Cook">
<div>
<h3 class="text-lg font-semibold text-white">Tim Cook</h3>
<p class="text-gray-500 text-md">CEO of Apple</p>
</div>
</div>
<p class="leading-normal text-gray-300 text-md">Diam quis enim lobortis scelerisque
fermentum dui faucibus in ornare. Donec pretium vulputate sapien nec sagittis
aliquam malesuada bibendum.</p>
</div>
</a>
</div>
</li>
</ul>
<ul class="hidden space-y-8 lg:block">
<li class="text-sm leading-6">
<div class="relative group">
<div
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
</div><a href="" class="cursor-pointer">
<div
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
<div class="flex items-center space-x-4"><img
src="https://pbs.twimg.com/profile_images/1221837516816306177/_Ld4un5A_400x400.jpg"
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Satya Nadella">
<div>
<h3 class="text-lg font-semibold text-white">Satya Nadella</h3>
<p class="text-gray-500 text-md">CEO of Microsoft</p>
</div>
</div>
<p class="leading-normal text-gray-300 text-md">Tortor dignissim convallis aenean et
tortor at. At ultrices mi tempus imperdiet nulla malesuada. Id cursus metus aliquam
eleifend mi. Quis ipsum suspendisse ultrices gravida dictum fusce ut.</p>
</div>
</a>
</div>
</li>
<li class="text-sm leading-6">
<div class="relative group">
<div
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
</div><a href="" class="cursor-pointer">
<div
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
<div class="flex items-center space-x-4"><img
src="https://pbs.twimg.com/profile_images/516916920482672641/3jCeLgFb_400x400.jpeg"
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Dan Schulman">
<div>
<h3 class="text-lg font-semibold text-white">Dan Schulman</h3>
<p class="text-gray-500 text-md">CEO of PayPal</p>
</div>
</div>
<p class="leading-normal text-gray-300 text-md">Quam pellentesque nec nam aliquam sem
et tortor consequat id. Enim sit amet venenatis urna cursus.</p>
</div>
</a>
</div>
</li>
<li class="text-sm leading-6">
<div class="relative group">
<div
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
</div><a href="" class="cursor-pointer">
<div
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
<div class="flex items-center space-x-4"><img
src="https://pbs.twimg.com/profile_images/1221837516816306177/_Ld4un5A_400x400.jpg"
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Satya Nadella">
<div>
<h3 class="text-lg font-semibold text-white">Satya Nadella</h3>
<p class="text-gray-500 text-md">CEO of Microsoft</p>
</div>
</div>
<p class="leading-normal text-gray-300 text-md">Tortor dignissim convallis aenean et
tortor at. At ultrices mi tempus imperdiet nulla malesuada. Id cursus metus aliquam
eleifend mi. Quis ipsum suspendisse ultrices gravida dictum fusce ut.</p>
</div>
</a>
</div>
</li>
<li class="text-sm leading-6">
<div class="relative group">
<div
class="absolute transition rounded-lg opacity-25 -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 blur duration-400 group-hover:opacity-100 group-hover:duration-200">
</div><a href="" class="cursor-pointer">
<div
class="relative p-6 space-y-6 leading-none rounded-lg bg-slate-800 ring-1 ring-gray-900/5">
<div class="flex items-center space-x-4"><img
src="https://pbs.twimg.com/profile_images/516916920482672641/3jCeLgFb_400x400.jpeg"
class="w-12 h-12 bg-center bg-cover border rounded-full" alt="Dan Schulman">
<div>
<h3 class="text-lg font-semibold text-white">Dan Schulman</h3>
<p class="text-gray-500 text-md">CEO of PayPal</p>
</div>
</div>
<p class="leading-normal text-gray-300 text-md">Quam pellentesque nec nam aliquam sem
et tortor consequat id. Enim sit amet venenatis urna cursus.</p>
</div>
</a>
</div>
</li>
</ul>
</div>
</div>
</section>
</body>
</html>
/* Doesn't require any CSS. */
//Doesn't require any JS.
This Tailwind CSS snippet provides a visually appealing and responsive customer testimonial grid designed for dark mode environments. It offers a clean and organized layout for displaying testimonials and quotes from satisfied customers, helping to build trust and credibility. The grid is fully customizable, allowing you to tailor its appearance and behavior to match your website's design.
Key Features:
- Responsive Design: The testimonial grid adapts seamlessly to different screen sizes, ensuring a consistent user experience across devices.
- Dark Mode Compatibility: The grid is specifically designed for dark mode environments, providing a visually pleasing and readable experience in low-light conditions.
- Customizable Styling: Easily modify the appearance of the testimonial grid using Tailwind CSS utility classes to match your website's design and branding.
- Clear and Concise Presentation: The testimonials are presented in a clear and concise manner, making it easy for users to read and understand.
- Avatar Images: Include avatar images for each testimonial to add a personal touch and help users connect with the individuals providing feedback.
Implementation:
- Include Tailwind CSS: Ensure you have Tailwind CSS installed and configured in your project.
- Create the HTML Structure: Set up the basic HTML structure for the testimonial grid, including the container, testimonial cards, and avatar images.
- Customize as Needed: Modify the Tailwind CSS classes and HTML structure to customize the appearance and content of the testimonial grid according to your specific requirements.
Latest Snippets
View All
Responsive Blog Grid with Tailwind CSS
User-Friendly Travel Booking Form in Bootstrap 5
Responsive CSS3 Pricing Table with Hover Animation
Responsive Contact Us Forms in Bootstrap 5
Notification UI Design with Navbar in Bootstrap 5
Interactive Social Media Buttons with CSS and JS
Lightweight FAQ Accordion Component with CSS
Responsive Registration Form Page with Image in Tailwind
Timeline Roadmap Example in Tailwind CSS
Notification Page Design Examples in Bootstrap 5
Need Help Support Page with Search in Bootstrap 5
Responsive Get In Touch Contact Form in Tailwind CSS
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
