Logo Cloud Grid

A client logo cloud built with Tailwind CSS: a short heading block followed by a bordered grid of eight company logos drawn as inline SVG placeholders. Use it under a hero, on a pricing page or next to testimonials to show social proof without loading any external images.

How it works

The root is section.tlc-logos, labelled by the #tlc-title heading. An amber "Customers" pill sits above it, and a short paragraph follows.

The logos live in a ul with role="list" (so Safari keeps the list semantics even though the bullets are removed). The grid shows two columns on phones and four from sm. It uses the gap-px technique: the list has a bg-stone-200 background and every li has its own bg-stone-50, so the 1px gaps become clean divider lines, and rounded-2xl with overflow-hidden rounds the outer corners.

Each logo is an svg with a 132×32 viewBox, a simple icon (wing, orbit, cloud, notebook, waves, stacked layers, leaf, hexagon) and a text wordmark. Every shape uses currentColor, so the whole logo is tinted by one text color class. By default all logos share a muted text-stone-400 for a calm, uniform look. The li is a group, and hovering a cell turns its background white and reveals a brand color through group-hover: classes such as group-hover:text-sky-600 and group-hover:text-violet-600. No JavaScript or custom CSS is needed.

Customization

• Replace an svg inside an li with your client's SVG logo; set fill="currentColor" on its paths to keep the muted and hover colors working, and update aria-label.
• text-stone-400 on each svg: use text-stone-500 for stronger logos or text-stone-300 for a lighter cloud.
• group-hover:text-sky-600 and the other group-hover: colors: set each to the real brand color, or remove them for a fully monochrome grid.
• grid-cols-2 sm:grid-cols-4 on the ul: add lg:grid-cols-6 for twelve smaller logos, keeping the count a multiple of the column count so no gap cell remains.
• h-24 sm:h-28 on each li: make the cells taller or shorter.
• bg-stone-200 on the ul and bg-stone-50 on the cells: change the divider and cell colors, or use gap-6 and drop the borders for floating logos.
• bg-amber-100 text-amber-800 on the pill and text-amber-700 on the link: switch the accent color.

Accessibility

Each logo has role="img" and an aria-label with the company name, so screen readers announce a clean name instead of reading the SVG text and shapes. The list keeps its item count for assistive technology. Decorative icons in the pill and link are aria-hidden. Hover effects are purely decorative and nothing important depends on them. Color transitions are removed with motion-reduce:transition-none, and the link shows a visible focus-visible outline in amber.

Usage notes

Only the Tailwind browser build is required; the snippet has no style.css or script.js. If you wrap logos in links to case studies, move the group and focus styles to the a element.