Testimonial Card
A clean testimonial card for React and Tailwind CSS with quote, author avatar, name and star rating to showcase social proof. Free and copy-paste ready.
★★★★★
“Empire UI saved us weeks. The components are gorgeous out of the box.”
Liam Chen
CTO, Northwind
Copy the code
export function TestimonialCard() {
return (
<figure className="w-72 rounded-2xl border border-white/10 bg-white/5 p-6 text-white">
<div className="text-amber-400">★★★★★</div>
<blockquote className="mt-2 text-sm leading-relaxed text-white/85">
“Empire UI saved us weeks. The components are gorgeous out of the box.”
</blockquote>
<figcaption className="mt-4 flex items-center gap-3">
<div className="h-9 w-9 rounded-full bg-gradient-to-br from-cyan-400 to-violet-600" />
<div>
<div className="text-sm font-bold">Liam Chen</div>
<div className="text-xs text-white/55">CTO, Northwind</div>
</div>
</figcaption>
</figure>
)
}Tailwind CSS · no dependencies · MIT licensed. Paste it straight into any React, Next.js or Vite project.
About the testimonial card
This testimonial card is part of Empire UI — a free, open-source library of 26+ component types rendered across 40 visual styles, from glassmorphism to neo-brutalism. Every block is copy-paste ready in React and Tailwind CSS with no runtime dependencies.
Want it in a different look? Browse all 40 styles or grab the matching glassmorphism components.