Testimonial with Large Portrait Photo

A featured testimonial section built with Tailwind CSS that pairs one customer quote with a large portrait photo. It suits landing pages, case-study teasers and pricing pages where a single strong endorsement works better than a grid of short reviews.

How it works

The root is section.tlp-testimonial, labelled by the #tlp-heading eyebrow. Inside, a max-w-5xl grid stacks the portrait above the quote on phones and switches to a 12-column layout at the lg breakpoint: the portrait takes lg:col-span-5, the text takes lg:col-span-7.

The portrait column has three layers. An aria-hidden block with bg-rose-200 and translate-x-4 translate-y-4 sits behind the photo as an offset frame. The img uses aspect-[4/5] with object-cover, so any portrait crops cleanly. A small white card pinned with absolute -bottom-5 left-5 shows a five-star rating and a "Verified customer" label.

The text column holds a figure with a decorative quote-mark SVG, a blockquote in font-serif that scales from text-2xl to lg:text-[2.1rem], and a figcaption with the name, role and company. Below the figure, a dl shows two result metrics separated by a border-rose-200 rule. The section is static HTML and needs no JavaScript or custom CSS.

Customization

bg-rose-50, bg-rose-200, text-rose-700 and border-rose-200: replace rose with sky, emerald or amber to recolor the background, the offset frame, the eyebrow and the metric numbers in one pass.
translate-x-4 translate-y-4 on the frame block: use -translate-x-4 to move the frame to the left side, or delete the block for a plain photo.
aspect-[4/5] on the img: switch to aspect-square or aspect-[3/4] for a shorter or taller portrait.
lg:col-span-5 and lg:col-span-7: change to lg:col-span-6 on both for an even split, or add lg:order-last to the portrait column to place the photo on the right.
font-serif on the quote paragraph: remove it to use the sans-serif body font for a more neutral look.
The dl metrics grid: delete it entirely or change grid-cols-2 to grid-cols-3 and add a third div with a dt/dd pair.
rounded-[2rem] on the image and frame: lower to rounded-xl for a sharper, more corporate shape.

Accessibility

The section is a landmark labelled by aria-labelledby="tlp-heading". The quote uses semantic figure, blockquote and figcaption, so assistive technology links the statement to the person. The portrait has a descriptive alt, explicit width and height to prevent layout shift, loading="lazy" and decoding="async". The star row is exposed as one image with role="img" and aria-label="Rated 5 out of 5", while each star SVG, the quote mark and the offset frame are aria-hidden. Metrics use a description list, so each number is read with its label. Stone and rose text on the light rose background meets WCAG AA contrast. There is no motion and no interactive element, so there is nothing to trap or animate.