Waterfall Testimonials Block for React

Each column in COLUMNS has a drop, a class that sets how far it starts below the first: md:mt-10 lg:mt-14 for the second and md:mt-20 lg:mt-28 for the third. Change those margins to make the staircase steeper or shallower, or set one to an empty string to line a column up with the first.

Each column is its own list, so every card stays in the stage you put it in and the steps are exact. A flowing layout, like the masonry block, balances the columns for you but cannot start one lower or group quotes by stage.

Below md the three columns sit in one row that scrolls sideways and snaps to each column (snap-x snap-mandatory), every slide 85% wide so the next one is visibly there. Each slide keeps its stage heading, so the swipe still reads as time passing. On tablets and up the row becomes a three-column grid.

Three groups, each with an h3 for its stage and a list of cards, read one after the other; each card is a figure with its quote in a blockquote and the author in a figcaption. The steps and lines are only spacing and borders, and the initials avatars are hidden because the name follows them. Nothing is focusable.

Edit COLUMNS at the top of the file: each column has a stage label and its quotes, and each quote has a quote, the author's name, initials and role and a tenure line such as "8 months in". The tenure is relative on purpose, so it never goes stale. The nine people and companies here are made up.

The header and the columns fade up once on load, with plain CSS transitions and no animation library. With reduced motion on, they appear in place at once. Nothing moves afterwards.

Yes. The columns run in reading order, the + marks sit on the start side and the carousel scrolls from the start, because the padding and lines use logical sides. Quote marks sit in a bdi element so they stay put.