Build a tabbed feature switcher with Tailwind CSS that works without JavaScript. Put three same-named radio inputs (visually hidden with sr-only) inside a section marked as a group, then a centered pill row of labels pointing at them, then three panels. Drive every state change with group-has variants keyed to the checked input id — for example group-has-[#feat-a:checked]:grid on the matching panel and the same variant for the active pill background — so both the pill highlight and the visible panel react to selection. Note that peer variants will not work here because the labels are nested inside the pill container rather than being siblings of the inputs. Each panel is a two-column card with a heading, a paragraph, a bullet list, and a rounded media placeholder.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Build a tabbed feature switcher with Tailwind CSS that works without JavaScript. Put three same-named radio inputs (visually hidden with sr-only) inside a section marked as a group, then a centered pill row of labels pointing at them, then three panels. Drive every state change with group-has variants keyed to the checked input id — for example group-has-[#feat-a:checked]:grid on the matching panel and the same variant for the active pill background — so both the pill highlight and the visible panel react to selection. Note that peer variants will not work here because the labels are nested inside the pill container rather than being siblings of the inputs. Each panel is a two-column card with a heading, a paragraph, a bullet list, and a rounded media placeholder.
