One customer quote set large on a dark background, built to carry a whole section on its own. A drawn quotation mark sits above the text, one phrase in the middle is picked out in the accent colour, and a divider separates the quote from the author's initials, name, role and company. Two short facts about the customer sit on the right. On phones the text drops to a smaller size and the facts move under the author.
const testimonial = {
quote: "We moved forty drivers onto Routewell over a single weekend.",
emphasis: "By Wednesday the phones had gone quiet,",
ending: "because every customer already knew when their delivery would arrive.",
name: "Ines Halloran",
role: "Head of Logistics",
company: "Copperline Freight",
initials: "IH",
facts: [
{ label: "Fleet size", value: "40 vans" },
{ label: "Customer since", value: "March 2023" },
],
};
export default function LargeQuoteTestimonialWithAuthor() {
const t = testimonial;
return (
<section className="bg-slate-950 px-6 py-20 text-white sm:py-28">
<figure className="mx-auto max-w-4xl">
<svg viewBox="0 0 48 36" fill="currentColor" aria-hidden="true" className="h-9 w-12 text-emerald-400">
<path d="M0 36V21.6C0 9.4 6.6 2 19.2 0l1.6 5.6C14 7.4 11 11.4 10.6 16.8H20V36H0zm27.2 0V21.6C27.2 9.4 33.8 2 46.4 0L48 5.6c-6.8 1.8-9.8 5.8-10.2 11.2h9.4V36h-20z" />
</svg>
<blockquote className="mt-8">
<p className="text-2xl font-medium leading-snug tracking-tight text-slate-100 sm:text-4xl sm:leading-tight">
{t.quote} <span className="text-emerald-300">{t.emphasis}</span> {t.ending}
</p>
</blockquote>
<figcaption className="mt-12 flex flex-col gap-8 border-t border-slate-800 pt-8 sm:flex-row sm:items-center sm:justify-between">
<div className="flex items-center gap-4">
<span aria-hidden="true" className="flex h-14 w-14 flex-none items-center justify-center rounded-full bg-emerald-400 text-base font-semibold text-slate-950">{t.initials}</span>
<div>
<p className="font-semibold">{t.name}</p>
<p className="mt-0.5 text-sm text-slate-400">{t.role}, {t.company}</p>
</div>
</div>
<dl className="flex gap-10">
{t.facts.map((f) => (
<div key={f.label}>
<dt className="text-xs font-medium uppercase tracking-wider text-slate-400">{f.label}</dt>
<dd className="mt-1 text-sm font-semibold text-slate-100">{f.value}</dd>
</div>
))}
</dl>
</figcaption>
</figure>
</section>
);
}
Install with one command: npx shadcn@latest add https://we.inc/r/large-quote-testimonial-with-author.json
Two or three sentences work best at this size. A longer quote turns into a wall of large text on phones, so trim it with the customer's permission or drop the font size a step.
Yes. Put an inline SVG or an image in the right-hand side of the `figcaption`, in place of the facts list, and give it a height of about `h-8`. Use a single-colour version so it sits well on the dark background.
Move the words you want coloured into the `emphasis` field and put the text before and after it into `quote` and `ending`. Either of those can be an empty string.
No. Nothing here uses state, so the HTML version works on its own in any page that loads Tailwind.
You can, by keeping an array of testimonials and an index in `useState`, but a single quote that stays put is read more often than slides that visitors have to click through.
Related: Testimonial Cards with Star Ratings and Initials Avatars, Split Hero with Email Capture, Pricing Table with Monthly and Yearly Toggle, Two-Column FAQ List with No JavaScript.
More testimonials or all free UI components. Start for free to have a full site built around it.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.