<p>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 <b>a</b> tags rather than the usual pattern of using a <b>ul/li</b> combination.  I don't have to use <b>a</b> tags at all and can use anything I can attach an <b>onClick</b> event handler to.
</p>


<p>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 <a href="https://svelte.dev">Svelte</a> 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.
</p>

<p>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 <b>display: none</b> so they aren't visible.
</p>
<pre>
<code class="language-css">
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;
}

</code>
</pre>

<p>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. 
</p>

<p>Finally, I continue to use my more explicit style of <b>tabs a</b> 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.
</p>