Testimonial
Component
High-converting Tailwind testimonial section layouts featuring beautiful typography and stunning Tailwind CSS reviews.
Install via CLI
Run this command to automatically add the component and its dependencies to your project.
npx @abhaysinghr516/business-wish add testimonialNew to the CLI? Run
npx @abhaysinghr516/business-wish init first to initialize your project.Build immediate trust with prospective customers using a beautifully crafted Tailwind testimonial section. Displaying authentic Tailwind CSS reviews and endorsements from real users is incredibly effective for conversion, especially when presented in minimal UI designs.
Testimonials heavily rely on the Avatar component for social proof, and are typically placed in a Card grid directly following the primary Hero section.
Minimal Card Testimonial
import React from "react";
import { Star } from "lucide-react";
const Testimonial = () => {
return (
<div className="py-20 w-full flex justify-center bg-white dark:bg-[#0A0A0A]">
<div className="mx-auto max-w-md w-full px-4">
<div className="relative rounded-[24px] bg-white dark:bg-neutral-900 border border-neutral-200/60 dark:border-white/10 shadow-[0_8px_30px_rgb(0,0,0,0.04)] dark:shadow-[0_8px_30px_rgb(0,0,0,0.1)] overflow-hidden">
{/* Subtle top glow */}
<div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-neutral-200 to-transparent dark:via-white/10" />
<div className="p-8 md:p-10">
<div className="flex gap-1 mb-6">
{[...Array(5)].map((_, i) => (
<Star key={i} className="w-4 h-4 fill-amber-400 text-amber-400" />
))}
</div>
<p className="text-[17px] text-neutral-800 dark:text-neutral-200 mb-8 leading-relaxed font-medium tracking-tight">
"The product has streamlined our workflow, saving us countless
hours. It's natively integrated, unbelievably fast, and has become an invaluable tool for our entire team."
</p>
<div className="flex items-center gap-4">
<img
src="/pfp.jpg"
alt="Avatar"
className="h-12 w-12 rounded-full object-cover shadow-sm bg-neutral-100"
/>
<div className="flex flex-col">
<span className="font-semibold text-neutral-900 dark:text-white text-[15px]">
Alex Chen
</span>
<span className="text-[14px] text-neutral-500 dark:text-neutral-400 font-medium">
Product Manager, TechCorp
</span>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default Testimonial;
Grid layout Testimonial Section
import React from "react";
const Testimonial = () => {
return (
<div className="py-24 bg-neutral-50 dark:bg-[#0A0A0A]">
<div className="mx-auto max-w-6xl px-6">
<div className="text-center mb-16">
<h2 className="text-3xl md:text-5xl font-semibold tracking-tight text-neutral-900 dark:text-white mb-4">
Loved by builders.
</h2>
<p className="text-neutral-500 dark:text-neutral-400 text-lg">
See how teams are transforming their workflows.
</p>
</div>
<div className="grid gap-6 md:gap-8 sm:grid-cols-2 lg:grid-cols-3">
{[
{
quote:
"This solution has transformed our business operations. The efficiency gains are truly remarkable.",
name: "Emma Watson",
position: "COO, InnovateNow",
},
{
quote:
"The customer support is unparalleled. They've been incredibly responsive and helpful throughout our journey.",
name: "Michael Chang",
position: "Founder, StartUp Solutions",
},
{
quote:
"We've experienced a significant boost in team collaboration since seamlessly adopting this platform.",
name: "Olivia Martinez",
position: "HR Director, GlobalTech",
},
].map((testimonial, index) => (
<div
key={index}
className="group relative rounded-[28px] bg-white dark:bg-neutral-900 border border-neutral-200/50 dark:border-white/5 p-8 hover:-translate-y-1 transition-all duration-300 shadow-[0_2px_10px_rgb(0,0,0,0.02)] hover:shadow-[0_20px_40px_rgb(0,0,0,0.06)] dark:hover:shadow-[0_20px_40px_rgb(0,0,0,0.2)]"
>
<p className="mb-8 text-neutral-700 dark:text-neutral-300 text-[16px] leading-[1.6]">
"{testimonial.quote}"
</p>
<div className="mt-auto pt-6 border-t border-neutral-100 dark:border-white/10">
<p className="font-semibold text-neutral-900 dark:text-white text-[15px]">
{testimonial.name}
</p>
<p className="text-[14px] text-neutral-500 dark:text-neutral-400">
{testimonial.position}
</p>
</div>
</div>
))}
</div>
</div>
</div>
);
};
export default Testimonial;
Full Width Testimonial
import React from "react";
import { Star } from "lucide-react";
const Testimonial = () => {
return (
<div className="py-24 w-full bg-white dark:bg-[#0A0A0A] flex justify-center px-4">
<div className="w-full max-w-5xl rounded-[32px] md:rounded-[40px] bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 overflow-hidden relative shadow-2xl">
{/* Abstract background elements */}
<div className="absolute top-0 right-0 w-[500px] h-[500px] bg-white/5 dark:bg-black/5 rounded-full blur-[100px] -translate-y-1/2 translate-x-1/4 pointer-events-none" />
<div className="relative p-12 md:p-20 text-center">
<div className="mx-auto max-w-3xl">
<div className="flex justify-center gap-1 mb-8">
{[...Array(5)].map((_, i) => (
<Star key={i} className="w-5 h-5 fill-white dark:fill-black text-transparent opacity-90" />
))}
</div>
<h3 className="text-3xl md:text-4xl lg:text-5xl font-semibold tracking-tight mb-8 leading-[1.2]">
"We've seen a 50% increase in productivity since
implementing this solution. It's intuitive, powerful, and has
become strictly essential."
</h3>
<div className="flex flex-col items-center justify-center pt-8 border-t border-white/10 dark:border-black/5">
<img
src="/pfp.jpg"
alt="Avatar"
className="mb-4 h-16 w-16 rounded-full object-cover ring-4 ring-white/10 dark:ring-black/5 bg-neutral-800"
/>
<p className="font-semibold text-[17px] mb-1">
Sarah Johnson
</p>
<p className="text-[15px] text-white/60 dark:text-black/60">
CTO, TechInnovate Inc.
</p>
</div>
</div>
</div>
</div>
</div>
);
};
export default Testimonial;
Slider Testimonial
import React, { useEffect, useState } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
const Testimonial = () => {
const testimonials = [
{
quote:
"This product has revolutionized how we approach our projects. The intuitive interface and powerful features have made our team definitively more efficient and creative.",
name: "David Lee",
position: "Lead Designer, CreativeTech",
},
{
quote:
"The level of customization and flexibility offered by this platform is unmatched. It has effectively allowed us to tailor our workflows perfectly to our unique needs.",
name: "Amanda Rodriguez",
position: "Operations Manager, FlexiSolutions",
},
{
quote:
"From the moment we implemented this system, our productivity skyrocketed. The seamless integration with our existing tools made the transition incredibly smooth.",
name: "Robert Chen",
position: "CEO, InnovateCorp",
},
];
const [currentIndex, setCurrentIndex] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % testimonials.length);
}, 6000);
return () => clearInterval(timer);
}, []);
const goToPrevious = () => {
setCurrentIndex(
(prevIndex) => (prevIndex - 1 + testimonials.length) % testimonials.length
);
};
const goToNext = () => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % testimonials.length);
};
return (
<div className="py-24 bg-white dark:bg-[#0A0A0A]">
<div className="mx-auto max-w-4xl px-4">
<div className="relative">
{/* Main Card */}
<div className="relative overflow-hidden rounded-[32px] bg-neutral-50 dark:bg-neutral-900 border border-neutral-100 dark:border-white/5 min-h-[350px] flex items-center justify-center">
{/* Nav Arrows inside card */}
<button
onClick={goToPrevious}
className="absolute left-4 md:left-8 z-20 rounded-full bg-white/80 dark:bg-black/40 backdrop-blur-md p-3 text-neutral-800 dark:text-white shadow-sm border border-black/5 dark:border-white/10 hover:scale-105 transition-all duration-300"
>
<ChevronLeft size={20} />
</button>
<button
onClick={goToNext}
className="absolute right-4 md:right-8 z-20 rounded-full bg-white/80 dark:bg-black/40 backdrop-blur-md p-3 text-neutral-800 dark:text-white shadow-sm border border-black/5 dark:border-white/10 hover:scale-105 transition-all duration-300"
>
<ChevronRight size={20} />
</button>
{/* Slides Content */}
<div className="px-12 md:px-24 py-16 text-center z-10 w-full transition-opacity duration-500 ease-in-out">
<p className="text-xl md:text-2xl font-medium tracking-tight text-neutral-900 dark:text-white leading-relaxed mb-10">
"{testimonials[currentIndex].quote}"
</p>
<div className="flex flex-col items-center">
<img
src="/pfp.jpg"
alt="Avatar"
className="mb-4 h-14 w-14 rounded-full object-cover shadow-sm bg-neutral-200"
/>
<p className="font-semibold text-neutral-900 dark:text-white text-[16px]">
{testimonials[currentIndex].name}
</p>
<p className="text-[14px] text-neutral-500 dark:text-neutral-400 mt-1">
{testimonials[currentIndex].position}
</p>
</div>
</div>
</div>
{/* Dots Indicator */}
<div className="mt-8 flex justify-center gap-2">
{testimonials.map((_, idx) => (
<button
key={idx}
onClick={() => setCurrentIndex(idx)}
className={`h-2 rounded-full transition-all duration-300 ${
currentIndex === idx
? "w-8 bg-neutral-900 dark:bg-white"
: "w-2 bg-neutral-300 dark:bg-neutral-700"
}`}
aria-label={`Go to slide ${idx + 1}`}
/>
))}
</div>
</div>
</div>
</div>
);
};
export default Testimonial;
Marquee Testimonial
import React from "react";
const Testimonial = () => {
const testimonials = [
{
name: "Jack",
username: "@jack",
body: "I've never seen anything like this before. It's amazing. I love it.",
},
{
name: "Jill",
username: "@jill",
body: "I don't know what to say. I'm speechless. This is amazing.",
},
{
name: "John",
username: "@john",
body: "I'm at a loss for words. This is amazing. I love it.",
},
{
name: "Jane",
username: "@jane",
body: "I'm speechless. This is amazing. I love it.",
},
];
// Duplicate for seamless loop
const duplicatedTestimonials = [...testimonials, ...testimonials, ...testimonials];
return (
<div className="py-24 bg-white dark:bg-[#0A0A0A] overflow-hidden flex flex-col items-center">
<div className="text-center mb-12">
<h2 className="text-3xl font-semibold tracking-tight text-neutral-900 dark:text-white mb-2">
Don't just take our word for it
</h2>
<p className="text-neutral-500 dark:text-neutral-400">
Hear what the community is saying about us.
</p>
</div>
{/* Marquee Container with fade edge masks */}
<div className="relative w-full max-w-6xl overflow-hidden flex">
{/* Left Fade */}
<div className="absolute left-0 top-0 bottom-0 w-32 z-10 bg-gradient-to-r from-white to-transparent dark:from-[#0A0A0A]" />
{/* Scrolling Track */}
<div className="flex w-max animate-marquee hover:[animation-play-state:paused] items-center gap-6 px-6">
{duplicatedTestimonials.map((item, idx) => (
<div
key={idx}
className="w-[320px] rounded-[24px] border border-neutral-200/60 dark:border-white/10 bg-neutral-50/50 dark:bg-neutral-900/50 p-6 shadow-sm backdrop-blur-sm"
>
<div className="flex flex-row items-center gap-3 mb-4">
<div className="h-10 w-10 rounded-full bg-gradient-to-br from-neutral-200 to-neutral-300 dark:from-neutral-700 dark:to-neutral-800 flex items-center justify-center text-sm font-bold text-neutral-600 dark:text-neutral-300">
{item.name[0]}
</div>
<div className="flex flex-col">
<span className="text-sm font-semibold text-neutral-900 dark:text-white">
{item.name}
</span>
<span className="text-xs text-neutral-500">{item.username}</span>
</div>
</div>
<p className="text-[15px] leading-relaxed text-neutral-700 dark:text-neutral-300">
"{item.body}"
</p>
</div>
))}
</div>
{/* Right Fade */}
<div className="absolute right-0 top-0 bottom-0 w-32 z-10 bg-gradient-to-l from-white to-transparent dark:from-[#0A0A0A]" />
</div>
{/* Inline styles for marquee animation */}
<style dangerouslySetInnerHTML={{__html: `
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(calc(-1 * (320px * 4 + 24px * 4))); }
}
.animate-marquee {
animation: marquee 30s linear infinite;
}
`}} />
</div>
);
};
export default Testimonial;
Bento Grid Testimonial
import React from "react";
import { Star } from "lucide-react";
const Testimonial = () => {
return (
<div className="py-24 bg-neutral-50 dark:bg-[#0A0A0A]">
<div className="mx-auto max-w-5xl px-6">
<h2 className="text-3xl font-semibold tracking-tight text-neutral-900 dark:text-white mb-10 text-center">
Voices of our users
</h2>
{/* Bento Grid layout */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6 auto-rows-[auto]">
{/* Large prominent block */}
<div className="md:col-span-2 md:row-span-2 rounded-[32px] bg-white dark:bg-neutral-900 border border-neutral-200/50 dark:border-white/5 p-8 md:p-12 shadow-[0_8px_30px_rgb(0,0,0,0.04)] flex flex-col justify-between relative overflow-hidden group">
<div className="absolute top-0 right-0 w-64 h-64 bg-blue-100 dark:bg-blue-900/10 rounded-full blur-[80px] -translate-y-1/2 translate-x-1/3 transition-all duration-700 group-hover:bg-blue-200 dark:group-hover:bg-blue-800/20" />
<div className="relative z-10">
<div className="flex gap-1 mb-6">
{[...Array(5)].map((_, i) => (
<Star key={i} className="w-5 h-5 fill-neutral-900 text-neutral-900 dark:fill-white dark:text-white" />
))}
</div>
<p className="text-2xl md:text-3xl font-medium tracking-tight text-neutral-900 dark:text-white leading-tight mb-8">
"The absolute best tool we've used all year. It seamlessly integrated into our stack and cut development time by half."
</p>
</div>
<div className="flex items-center gap-4 relative z-10 mt-auto">
<img src="/pfp.jpg" alt="Avatar" className="h-14 w-14 rounded-full object-cover" />
<div>
<p className="font-semibold text-neutral-900 dark:text-white">Sophia Reynolds</p>
<p className="text-sm text-neutral-500">VP of Engineering, Paradigm</p>
</div>
</div>
</div>
{/* Standard block 1 */}
<div className="rounded-[32px] bg-neutral-900 dark:bg-neutral-800 text-white p-8 flex flex-col justify-between shadow-[0_8px_30px_rgb(0,0,0,0.04)]">
<p className="text-[16px] leading-[1.6] mb-8 font-medium text-white/90">
"We migrated perfectly in under 2 hours without downtime. Incredible."
</p>
<div className="mt-auto">
<p className="font-semibold">Marcus Jin</p>
<p className="text-sm text-white/60">DevOps Lead</p>
</div>
</div>
{/* Standard block 2 */}
<div className="rounded-[32px] bg-white dark:bg-neutral-900 border border-neutral-200/50 dark:border-white/5 p-8 flex flex-col justify-between shadow-[0_8px_30px_rgb(0,0,0,0.04)]">
<p className="text-[16px] leading-[1.6] mb-8 text-neutral-700 dark:text-neutral-300">
"Their API is a joy to work with. Highly recommend for enterprise."
</p>
<div className="mt-auto">
<p className="font-semibold text-neutral-900 dark:text-white">Elena Rostova</p>
<p className="text-sm text-neutral-500">Backend Dev</p>
</div>
</div>
</div>
</div>
</div>
);
};
export default Testimonial;