Make it more obvious which tab is the active tab

[florent-leborgne]

I think our current tab UX doesn't really make it clear which one is the active tab. There is the blue color but for some reason it does not appear that obvious to me.

Maybe @itsalexcm would have some ideas or input :)

In the example below, my brain tells me I'm on the 2nd tab, then I tell it "no, why would the 2nd tab be the default one, we've just opened the page? And look at this blue color, this is it!" and we can resume our reading, but only after 4 seconds of internal freeze.

[itsalexcm]

Can you give me a bit more of context, @florent-leborgne? Where is that happening?

[florent-leborgne]

Sure, on docs pages (for example https://www.elastic.co/docs/solutions/search/agent-builder/get-started) whenever we add tabs or components from the documentation system that render as tabs (like applies-switch), the rendered tabs look like in the issue description.

So this is just a general issue with the way we render tabs in our docs, the tab title area isn't associated visibly enough with the tab content/it's not that obvious to tell which is the active tab in my opinion.