Build a customer-story section with Tailwind CSS built around video thumbnails. A left-aligned heading with a "View all 40 stories →" link pushed to the right on md and up, then a three-column grid of story cards. Each card is a rounded-2xl bordered tile whose top is a 16:9 thumbnail: a dark gradient panel with a faint oversized customer initial behind it, a white circular play button centred with a group-hover scale, a duration pill in the bottom-right corner, and an industry tag in the top-left. The card body holds a short pull quote in medium weight, then a footer row with a small avatar circle, the speaker's name, and their title. Keep the whole card wrapped in a group so the play button and the quote react together on hover, and stack to one column on mobile.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Build a customer-story section with Tailwind CSS built around video thumbnails. A left-aligned heading with a "View all 40 stories →" link pushed to the right on md and up, then a three-column grid of story cards. Each card is a rounded-2xl bordered tile whose top is a 16:9 thumbnail: a dark gradient panel with a faint oversized customer initial behind it, a white circular play button centred with a group-hover scale, a duration pill in the bottom-right corner, and an industry tag in the top-left. The card body holds a short pull quote in medium weight, then a footer row with a small avatar circle, the speaker's name, and their title. Keep the whole card wrapped in a group so the play button and the quote react together on hover, and stack to one column on mobile.
