Exclusion Tabs
From Stripe’s wonderful blog. Uses Web Animations API. The trick is to duplicate the tab list, one in default styling, one with active styling, and use clip path to show the active indicator. This way, you can use any colors you want without relying on solutions that use mix-blend-mode
. Make sure to mark the duplicate items with aria-hidden
.