JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<label for="tab-1">tab 1</label>
<input type="radio" name="tab" id="tab-1" checked>
<label for="tab-2">tab 2</label>
<input type="radio" name="tab" id="tab-2">
<label for="tab-3">tab 3</label>
<input type="radio" name="tab" id="tab-3">


<main>
  <div id="content-1">
    First tab
  </div>
  <div id="content-2">
    Second tab
  </div>
  <div id="content-3">
    Third tab
  </div>
</main>

CSS

body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

input {
  position: absolute;
  top: -1000em;
  left: -100000em;
}


main {
  width: 100%;
  order: -1;
}

label {
  background: #f9f9f9;
  padding: 0.5em 1em;
}

#content-1,
#content-2,
#content-3 {
  display: none;
  margin-bottom: 1em;
  padding: 0.5em;
}

#tab-1:checked~* #content-1 {
  display: block;
}

#tab-2:checked~* #content-2 {
  display: block;
}

#tab-3:checked~* #content-3 {
  display: block;
}