6 hours ago

Design a pixel-perfect testimonial slider section identical to the provided reference image. Layout & Style Section background: light cream / off-white Center-aligned heading: Small cursive text: “Testimonials” Large bold serif heading: “Our Customer Say” Below the heading, show two testimonial cards side-by-side Cards must be white with: Rounded corners Soft box shadow Proper internal spacing The active testimonial card should have a blue border outline exactly like the reference Testimonial Card Content Left side: customer image in a rounded rectangle Right side content: Star rating (★★★★★) with numeric rating (5/5) Bold testimonial title Paragraph testimonial text Highlighted bold recommendation line at the bottom Slider Behavior Testimonials must function as a horizontal slider Show: Desktop: 2 cards visible Mobile: 1 card visible Smooth sliding animation using transform: translateX Pagination dots centered below the cards Active dot highlighted Optional auto-slide with pause on hover Technical Requirements Use HTML, Tailwind CSS, and vanilla JavaScript No external slider libraries Clean, reusable class structure Fully responsive Goal Match spacing, typography, colors, and proportions as close as possible to the reference image.

Fork

Windframe is an AI visual editor for rapidly building stunning web UIs & websites

Start building stunning web UIs & websites!

Build from scratch or select prebuilt tailwind templates