Update v4.2 - New components, 10+ framework guides, and quality improvements. Visit Changelog

Tailwind CSS Blockquote

Implement and style Tailwind CSS Blockquote component to emphasise quoted or cited content. Widely used in articles, blog posts and testimonials.

Default blockquote

Use a standard blockquote with quote text and a citation.

Small

Use a smaller quote size for denser layouts or shorter supporting quotes.

Medium

Use a medium quote size for general-purpose editorial layouts.

Large

Increase the quote size to create a stronger pull-quote or featured testimonial.

Alignment

Use text-alignment utilities to center or right-align the quote and citation.

Right-aligned blockquote

Right-align the quote and citation for a more editorial layout.

Citing a source

Add a citation to identify the quoted person, publication, or work.

Citation with avatar

Pair the attribution with an avatar to add more author context.

Blockquote with left border

Add a left border to create a more editorial pull-quote style.

© 2026 Preline Labs.