Regional Tabs Logos Block for React

Edit the three lists at the top (AMERICAS, EMEA, APAC): each customer is a name, an icon, a lettering, a mark and its city and country. REGIONS joins them, and "All" is the three together, so its count and its rows can never disagree with the others. To add a region, add a list and a line in REGIONS.

The tab list is one tab stop: the arrow keys move between the tabs and open each panel as you reach it, and Tab then goes into the open panel. Each tab's count is part of its name ("Americas 3"), and the list in the panel is named after the region.

The panels are stacked in one grid cell with an unseen copy of the longest panel (All), so the block keeps its height and nothing below it jumps when you switch tabs. A region's cells sit at the top and the rest of the cell is left empty. Delete the copy (the invisible div) if you prefer the block to shrink to the open panel.

Yes. The tabs, the columns and the rows follow the page's direction; each wordmark keeps its own direction because a logo is artwork, and the city and country stay at the end of the row.

The header and each panel fade up with a CSS transition, once when the page loads and again as a tab opens, and each wordmark eases to the text colour on hover. With reduced motion those transitions are off.