Stop Rebuilding UI

Logos Featured Quote Reverse Split

A reversed featured quote split logo block for React and Next.js with the customer testimonial on the left and a flagship logo mark on the right, hero-scale wordmark, semantic blockquote, and attribution figcaption built with shadcn/ui and Tailwind CSS

Scroll to load preview

Lead with the customer voice in a reverse-orientation featured quote split block for React and Next.js. Features a left half containing a text-2xl semantic blockquote with specific numeric tension and a figcaption attribution row carrying avatar initials, author name, and role, a right half holding a single size-24 rounded-3xl bordered container with a size-12 central mark plus a text-3xl bold wordmark and a featured customer pill, and a thin vertical divider between halves on desktop. Built with TypeScript, motion/react parent entrance with split directional stagger using useReducedMotion, Lucide React icon mark, and Tailwind CSS theme variables. Perfect for landing pages that want the quote to carry the scan-weight before the logo identifies the source, mirror-image variants of flagship customer sections, and any moment where reading-order primacy matters.

FAQ

Last updated on April 11, 2026

Was this page helpful?

Sign in to leave feedback.