Six quote designs in Tailwind: an editorial pull quote, a bordered documentation quote, a testimonial card, a gradient quote with a highlighted phrase, a large centred quote and a social post style quote.
An editorial pull quote with a large decorative quotation mark from a before: utility, serif quote text and an attribution in a figcaption. figure, blockquote and figcaption keep the quote and its source connected.
View code
<figure class="relative w-full max-w-md pl-12">
<blockquote class="font-serif text-xl leading-relaxed text-slate-900 before:absolute before:left-0 before:-top-3 before:font-serif before:text-7xl before:leading-none before:text-indigo-200 before:content-['\201C']"><p>Clarity is a feature. Every extra choice is a small tax on your customer.</p></blockquote>
<figcaption class="mt-3 text-sm font-semibold text-slate-600">Sam Patel, <cite class="font-normal italic">Shop Notes</cite></figcaption>
</figure>
02. Tailwind Bordered Quote
TailwindMinimal
A simple quote with a thick left border and a soft background, for articles and docs. border-l-4 and a sky colour mark the quote, and a footer line with an em dash gives the source in muted text.
A testimonial card with the quote, an avatar and the person's name and role, built with Tailwind utilities. The names here are placeholders; only publish real quotes from real customers, with their permission.
View code
<figure class="w-full max-w-sm rounded-2xl border border-slate-200 bg-white p-6 shadow-lg shadow-slate-900/5">
<blockquote class="text-[15px] leading-relaxed text-slate-800"><p>"Our first sale came in two hours after launch. Setup was genuinely simple."</p></blockquote>
<figcaption class="mt-4 flex items-center gap-3"><span aria-hidden="true" class="grid h-10 w-10 place-items-center rounded-full bg-emerald-100 text-sm font-extrabold text-emerald-800">PL</span><span><b class="block text-sm text-slate-900">Placeholder Name</b><small class="text-slate-600">Founder, Example Co</small></span></figcaption>
</figure>
04. Tailwind Gradient Quote
TailwindGradient
A bold landing-page quote on a violet gradient with the key phrase highlighted by a mark element styled as a marker underline. bg-gradient-to-br sets the panel and an arbitrary gradient value draws the highlight.
View code
<figure class="w-full max-w-md rounded-3xl bg-gradient-to-br from-indigo-900 to-violet-800 p-7">
<blockquote><p class="text-xl font-bold leading-snug text-white">Switching took a weekend and <mark class="bg-[linear-gradient(transparent_55%,#f59e0b_55%)] px-1 text-white">our refund requests halved</mark>.</p></blockquote>
<figcaption class="mt-4 text-sm text-violet-200">Placeholder quote, replace with a real customer</figcaption>
</figure>
05. Tailwind Centred Quote
TailwindTypography
A large centred italic quote with decorative rules either side of the attribution, made with before: and after: lines in a flex row. text-2xl sm:text-3xl scales the quote up on larger screens.
A quote styled as a social post with an avatar, a display name, a handle, the text and a date in a time element. It is a neutral design that does not imitate any particular platform's branding.