This demo has two versions. One just shows how to do a basic layout with 3 tabs and no interaction. Using flexbox I'm able to simplify the HTML with only a tags rather than the usual pattern of using a ul/li combination. I don't have to use a tags at all and can use anything I can attach an onClick event handler to.

The second demo does a complete set of 3 tabs with associated panels and the JavaScript necessary to make them work. The code you see here is Svelte template code to make the example more succinct, and to provide the handlers and interaction. You could also do this with Vanilla JavaScript with not much more hassle.

The interactive demo isn't terribly difficult. You need to use a class to toggle the visuals for "active" vs. inactive tabs and panels, and you have to mark the inactive panels display: none so they aren't visible.

tabs a.active {
  background-color: var(--color-bg-secondary);
}

panel {
  display: none;
}

panel.active {
  border: 1px solid var(--color-accent);
  display: flex;
  flex-direction: column;
  padding: 1em;
}

It's the only place you need a class for this simple demo. Using classes to design state changes and different appearances works well since the alternative would be to somehow change the tags, and that won't work.

Finally, I continue to use my more explicit style of tabs a rather than using classes to avoid specifying the structure I want to select. I would say you don't have to do this, but it does make it a lot easier to find the HTML that a piece of CSS applies to, and also makes sure you aren't accidentally applying a style from somewhere else via the cascade.