Tabbed Carousel Banner Block for React

Edit ENTRIES at the top of the file: each entry is an id, the tab's label, and the panel's badge, title, line, link and href. The tabs and the panels are both drawn from the list, so adding a fourth entry adds both.

All panels stay mounted and take the same grid cell, and the cell is as tall as the tallest panel. The closed ones are hidden by the tabs: invisible, out of the tab order and out of the page's reading order, so a keyboard never lands on a hidden link. Each panel has keepMounted, so the closed ones stay in the page.

Tab moves focus into the tab row, the arrow keys move between the tabs (a tab opens its panel when it takes focus), Home and End jump to the first and last, and Tab again moves on to the open panel's link.

The rotating carousel banner owns that: it needs a Pause button, pausing on hover and focus, and a reduced-motion guard. Here the visitor drives, so there is nothing to pause, and nothing moves under their cursor.

The card fades up once on load and the tab underline moves to the chosen tab, with CSS only. With reduced motion turned on the entrance is off and the underline jumps.

The tab row scrolls sideways inside the card when the three labels don't fit, and the panel text wraps. Nothing else scrolls at 320 pixels, and in a right-to-left layout the tabs, the underline and the arrow mirror.