Monogram Badge Strip Logos Block for React

Edit CUSTOMERS: each entry is the customer's name, the two or three initials for the badge and a lettering for them. The badge is knocked out of the text colour (bg-current) with the initials in text-background, so any monogram you can set in text works.

Seven fills the box in one row from sm, and on a phone it makes a row of four over a row of three. The grid is twelve columns there (four tiles span three, three span four), so both rows run edge to edge and the border colour never shows through a gap. Keep the shorter names among the first four.

The list is a gap-px grid on a bg-border background inside overflow-hidden rounded-xl border, and each tile is bg-background. The gaps are the hairlines, the box's radius is the only radius, and the tiles have none.

Replace each icon and name with the company's one-colour logo at about about size-9 tall, drawn in currentColor so it keeps the muted colour and the hover. Give an img the company's name as its alt, or an inline svg a role="img" and an aria-label. The strip needs no other change.

The tiles are a real list; each item's name is visible text and the monogram is hidden from assistive technology, so a screen reader hears "Dalbeck", not "Da". The names use text-muted-foreground at full strength, which passes WCAG AA. Nothing is focusable, so the hover fill is a visual touch only.

The block fades up once when the page loads, with a CSS transition, and each logo eases to the text colour on hover. With reduced motion the entrance is off and the hover colour changes at once.