Testimonials is a pack of eight sets of customer testimonial and review sections, designed and maintained in-house by uiCookies. Every set comes in three versions that look the same: plain HTML and CSS, Bootstrap 5 using its cards, grid, buttons, badges and progress bars where they fit, and Tailwind CSS 4. The sets cover card grids, a featured quote, sliders, a masonry wall of love, star ratings with a review summary, video and case study cards, a dark set, and a CSS-only marquee with a container query card.
A good testimonial section is believable before it is pretty. Use a real name, a role and a company for every quote, say where a quote came from when it was not given to you directly, and pick short, specific quotes that mention a result over long general praise. In the markup, a figure with a blockquote and a figcaption keeps each quote tied to its author for assistive technology. Star ratings need the score written as text as well as drawn, sliders should never move on their own, and anything that does move, like a marquee, needs a way to pause it and should stop when the visitor has asked for reduced motion.
Free download Browse live demos All snippets
The sets
1. Testimonial Cards Grid
A centred heading over three quote cards with initials avatars, name, role and company, and a compact six-card grid with one indigo accent card.
Use it as the main testimonial section on a home or pricing page. The grid steps from one column to two and three, and in Bootstrap it is .row-cols with .card.
Live Demo CSS, Bootstrap & Tailwind code
2. Featured Testimonial Section
One quote given the full width: a centred serif statement under a text wordmark, and a split layout that pairs the quote with an abstract CSS portrait.
Use it where one strong endorsement does more than a grid. The company names are styled text and the portrait is CSS gradients, so there are no logos or photos to source.
Live Demo CSS, Bootstrap & Tailwind code
3. Multi-Card Testimonial Slider
A card slider showing three reviews at a time with arrow buttons, and a split slider with the heading, buttons and a counter beside one large story.
The track is a CSS scroll-snap list that swipes and scrolls without a script; a few lines of vanilla JavaScript add the buttons. Nothing autoplays.
Live Demo CSS, Bootstrap & Tailwind code
4. Wall of Love Testimonials
A masonry wall of mixed-length notes with a source label on each, and a collapsed four-column wall that fades into a link to the full page.
The masonry is CSS multi-column layout, so every card keeps its own height with no script, in all three versions.
Live Demo CSS, Bootstrap & Tailwind code
5. Customer Review Summary
An average score with a five-row rating breakdown and star-rated review cards, plus a rating pill, a score tile and an inline rating link.
Stars are one masked gradient element that can show partial ratings, and every score and percentage is also written as text for screen readers.
Live Demo CSS, Bootstrap & Tailwind code
6. Video Case Study Testimonials
Video testimonial cards with a poster, play button, duration and headline result, and a wide case study feature with three result tiles.
Each poster is a single link to the video or story, so the page loads no player. The artwork is CSS, ready to swap for real thumbnails.
Live Demo CSS, Bootstrap & Tailwind code
7. Dark Testimonial Section
Glow-border quote cards on a near-black page, and a spotlight quote with gradient text over a row of customer names set as text wordmarks.
Greys are chosen for contrast on dark surfaces, the border is two background layers on one element, and Bootstrap runs in data-bs-theme="dark".
Live Demo CSS, Bootstrap & Tailwind code
8. Modern CSS Testimonials
Two rows of quotes in a CSS marquee, and one testimonial card that changes its layout with a container query.
No JavaScript: hover, focus or a :has() Pause switch stops the marquee, and under reduced motion it does not move at all and becomes a scrollable row.
Live Demo CSS, Bootstrap & Tailwind code
Frequently asked questions
Are these testimonial sections free for commercial projects?
Yes. Every set is free for personal and commercial projects, including client work and products you sell. Attribution is optional but always welcome. The licence is at uicookies.com/license/.
Do these testimonial sections need JavaScript?
Only the slider does. Its arrow buttons use a few lines of vanilla JavaScript with no library, and the slider still swipes and scrolls without it. The grids, featured quotes, wall of love, ratings, case studies, dark set and the marquee are HTML and CSS only.
Are the testimonials accessible?
Each quote is a figure with a blockquote and a figcaption, so the author stays attached to the quote. Star ratings and rating bars are hidden from screen readers and replaced by text such as Rated 4.7 out of 5. Every link and button has a visible focus outline, the slider never autoplays, the marquee can be paused and stops under prefers-reduced-motion, and every set passes an automated axe-core WCAG 2.1 AA check.
Which frameworks are included?
Every set has three files that look the same: plain HTML and CSS, Bootstrap 5.3.8 and Tailwind CSS 4. The Bootstrap files use .card, the grid, .btn, .badge, .progress, .ratio and .form-switch where they fit, with a small style block for the rest. The Tailwind files use utility classes in the markup, with a style block only for theme colours, the star rating utility and the marquee keyframes.
Can I use real customer photos and logos instead of initials?
Yes. The avatars are a single element, so you can replace one with an img of the same size and give it an empty alt, since the name is already printed beside it. The text wordmarks and CSS posters can be swapped for logo or thumbnail images the same way. Only publish quotes, names and photos your customers have agreed to share.
