JSFiddle - React, Tailwind, and code Playground

by Rogier

HTML

<div class=trickery>
  <input id=tab-1 type=radio name=tab value=content-1 checked>
  <input id=tab-2 type=radio name=tab value=content-2>
  <input id=tab-3 type=radio name=tab value=content-3>

  <div class=tabs>
    <label for=tab-1>tab one</label>
    <label for=tab-2>tab two</label>
    <label for=tab-3>tab three</label>
  </div>

<div class=container>
    <div id=content-1>content one</div>
    <div id=content-2>content two</div>
    <div id=content-3>content three</div>
  </div>
</div>

CSS

.trickery > input {
  display: none;
}

.tabs > label {
  display: inline-block;
  width: 8em;
  border: 1px solid gold;
}

.container > div {
  display: none;
  min-height: 8em;
  border: 1px solid gold;
}

#tab-1:checked ~ .tabs [for=tab-1],
#tab-2:checked ~ .tabs [for=tab-2],
#tab-3:checked ~ .tabs [for=tab-3] {
  background-color: gold;
}

[value=content-1]:checked ~ .container #content-1,
[value=content-2]:checked ~ .container #content-2,
[value=content-3]:checked ~ .container #content-3 {
  display: block;
}