Explore a collection of Tailwind CSS testimonial section examples designed to highlight customer feedback and build trust with your audience. These layouts feature a variety of styles and structures, making them easy to integrate into any website or product.
"use client";
import { Star } from "lucide-react";
import { Card, Text } from "@hummingbirdui/react";
export default function Testimonial1() {
return (
<section className="px-6 py-20">
<Card className="p-6 sm:p-14 border-subtle rounded-3xl max-w-2xl mx-auto">
<div className="flex items-center justify-between mb-12">
<img
src="https://upload.wikimedia.org/wikipedia/commons/9/96/Microsoft_logo_%282012%29.svg"
alt="Microsoft Logo"
className="h-6"
/>
<div className="flex items-center gap-1">
<Star className="size-5 text-warning" fill="currentColor" />
<span className="text-sm text-subtle font-black italic uppercase">
Review 03/26
</span>
</div>
</div>
<Text
as="blockquote"
size="2xl"
fontWeight="medium"
className="relative md:text-3xl text-default mb-10"
>
<span className="absolute -top-6 -left-12 text-8xl text-primary-light/25 select-none">
<svg className="size-20" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621c.537-.278 1.24-.375 1.929-.311c1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 0 1-3.5 3.5a3.87 3.87 0 0 1-2.748-1.179m10 0C13.553 16.227 13 15 13 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621c.537-.278 1.24-.375 1.929-.311c1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 0 1-3.5 3.5a3.87 3.87 0 0 1-2.748-1.179"
/>
</svg>
</span>
The attention to detail is{" "}
<span className="underline decoration-primary-light/25 decoration-4 underline-offset-4">
staggering
</span>
. It's rare to find a tool that balances power with such a clean,
effortless user experience.
</Text>
<div className="flex items-center gap-4">
<img
className="size-16 border-3 border-white dark:border-subtle rounded-xl shadow-sm"
src="https://i.pravatar.cc/150?u=5"
alt="Author"
/>
<div>
<Text
as="h5"
size="lg"
fontWeight="medium"
className="text-default"
>
Julianne Sterling
</Text>
<span className="text-sm text-muted">
Design Director @Microsoft
</span>
</div>
</div>
</Card>
</section>
);
}"use client";
import { Card, Text } from "@hummingbirdui/react";
export default function Testimonial2() {
return (
<section className="px-6 py-20">
<Card className="max-w-xl lg:max-w-5xl mx-auto lg:flex-row items-center border-subtle rounded-xl">
<div className="aspect-4/3 lg:max-w-105 lg:min-h-130 bg-black">
<img
src="https://images.unsplash.com/photo-1556157382-97eda2d62296?q=80&w=1200&auto=format&fit=crop"
className="size-full object-cover opacity-80 grayscale hover:grayscale-0 transition duration-700"
alt="Client"
/>
</div>
<div className="flex-1 p-8 lg:p-16">
<Text
as="blockquote"
size="2xl"
fontWeight="light"
className="sm:text-3xl text-default leading-normal tracking-tight mb-14"
>
“We didn't just find a vendor; we found a{" "}
<span className="font-medium text-primary">strategic partner</span>.
Their ability to scale with our complexity was the deciding factor
in our Series C success.”
</Text>
<Text
as="h4"
size="lg"
fontWeight="medium"
className="sm:text-xl text-default"
>
Adriana Rivera
</Text>
<span className="text-muted">Chief Risk Officer @PayPal</span>
</div>
</Card>
</section>
);
}"use client";
import { Avatar, Text } from "@hummingbirdui/react";
export default function Testimonial3() {
return (
<section className="px-6 py-24 max-w-7xl mx-auto">
<Text as="h2" size="4xl" className="sm:text-5xl max-w-2xl mb-6">
How modern teams{" "}
<span className="text-subtle">actually ship faster</span> at scale
</Text>
<Text size="lg" className="text-muted mb-16">
Real feedback from people building modern products
</Text>
<div className="grid lg:grid-cols-2 items-center gap-12">
<div className="relative max-w-xl">
<img
src="https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt=""
className="rounded-2xl size-full"
/>
<div className="absolute bottom-6 left-6 bg-white/80 backdrop-blur px-4 py-2 rounded-lg text-sm font-medium text-black">
⭐ 4.9 Average Rating
</div>
</div>
<div>
<Text as="h3" size="5xl" className="mb-6 text-primary">
“
</Text>
<Text size="xl" className="mb-6 text-default leading-relaxed">
This is by far the best tool we have used in years. The interface is
incredibly intuitive and the performance is unmatched. It helped our
team move faster and deliver better results without extra
complexity.
</Text>
<div className="mb-8 text-warning text-lg">★ ★ ★ ★ ★</div>
<div className="flex items-center gap-4">
<Avatar size="lg">
<Avatar.Image
src="https://i.pravatar.cc/100?img=8"
alt="Avatar"
className="grayscale"
/>
</Avatar>
<div>
<Text fontWeight="semibold" className="mb-0">
Edison Cooper
</Text>
<span className="text-muted">CTO at TechFlow</span>
</div>
</div>
</div>
</div>
</section>
);
}"use client";
import { Triangle } from "lucide-react";
import { Avatar, Card, Divider, Text } from "@hummingbirdui/react";
export default function Testimonial4() {
return (
<section className="px-6 py-24">
<Card className="p-6 md:p-10 rounded-3xl max-w-5xl mx-auto border-subtle">
<svg
className="absolute top-6 right-6 sm:top-10 sm:right-10 opacity-15"
width="45"
height="36"
viewBox="0 0 45 36"
fill="currentColor"
>
<path d="M13.5 0C6.044 0 0 6.044 0 13.5c0 4.256 1.954 8.044 5.011 10.511L1.5 36h9l4.5-13.5V0h-1.5zm27 0C33.044 0 27 6.044 27 13.5c0 4.256 1.954 8.044 5.011 10.511L28.5 36h9l4.5-13.5V0h-1.5z" />
</svg>
<div className="flex items-center gap-2 mb-10">
<div className="size-2 rounded-full bg-success-light" />
<span className="text-xs font-bold uppercase tracking-widest text-subtle">
Verified Client
</span>
</div>
<Text
as="blockquote"
size="2xl"
fontWeight="medium"
className="md:text-3xl text-default leading-snug tracking-tight mb-0"
>
"The platform didn't just meet our expectations; it
completely redefined how we handle scaling. The{" "}
<span className="text-transparent bg-clip-text bg-linear-to-r from-secondary to-primary font-semibold">
automation capabilities
</span>{" "}
alone saved us over 20 hours a week."
</Text>
<Divider className="border-subtle my-6 lg:my-8" />
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<Avatar size="lg">
<Avatar.Image
src="https://i.pravatar.cc/100?img=8"
alt="Avatar"
className="grayscale"
/>
</Avatar>
<div>
<Text
size="base"
fontWeight="semibold"
className="text-default mb-0"
>
Marcus Thorne
</Text>
<span className="text-xs text-subtle">Lead Dev at Stripe</span>
</div>
</div>
<Triangle className="size-6 opacity-15" fill="currentColor" />
</div>
</Card>
</section>
);
}"use client";
import { Badge, Card, Text } from "@hummingbirdui/react";
export default function Testimonial5() {
return (
<section className="px-6 py-24 max-w-6xl mx-auto flex flex-col lg:flex-row gap-20 items-center">
<div className="lg:w-7/12">
<Text
as="blockquote"
size="4xl"
className="md:text-5xl/14 italic tracking-tight mb-12"
>
“Before using this platform, our process was{" "}
<span className="underline decoration-warning decoration-4 underline-offset-8">
slow and full of friction
</span>
. Now everything is automated and incredibly reliable.”
</Text>
<div className="flex items-center gap-6">
<img
src="https://i.pravatar.cc/100?img=60"
alt="Nafis"
className="size-20 rounded-2xl rotate-3 object-cover shadow-xl border-4 border-white"
/>
<div>
<Text size="xl" fontWeight="bold" className="tracking-tight mb-1.5">
Nafis Rahman
</Text>
<span className="text-muted font-medium italic">
Engineering Lead at Vertex
</span>
</div>
</div>
</div>
<div className="w-full lg:w-5/12 space-y-4">
<Card className="p-8 border-subtle rounded-4xl">
<div className="flex justify-between items-start mb-4">
<Text
size="6xl"
fontWeight="black"
className="text-default leading-none"
>
3x
</Text>
<Badge variant="subtle" color="success" size="md">
↑ 200%
</Badge>
</div>
<Text fontWeight="medium" className="text-muted uppercase">
Faster daily deployments
</Text>
</Card>
<div className="grid grid-cols-2 gap-4">
<div className="p-6 rounded-4xl text-white dark:text-neutral bg-neutral dark:bg-white">
<Text size="3xl" fontWeight="bold" className="mb-6">
-60%
</Text>
<Text
size="xs"
fontWeight="semibold"
className="uppercase tracking-widest"
>
Error Rate
</Text>
</div>
<div className="p-6 rounded-4xl text-white dark:text-neutral bg-warning">
<Text size="3xl" fontWeight="bold" className="mb-6">
99.9%
</Text>
<Text
size="xs"
fontWeight="semibold"
className="uppercase tracking-widest"
>
Uptime
</Text>
</div>
</div>
</div>
</section>
);
}