JSFiddle - React, Tailwind, and code Playground

HTML

<div id="overallDiv">
    <input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked" />
    <label for="rad1" class="tab">Fisrt Tab</label>

    <input type="radio" name="tabGroup1" id="rad2" class="tab2" />
    <label for="rad2" class="tab">Second Tab</label>

    <input type="radio" name="tabGroup1" id="rad3" class="tab3" />
    <label for="rad3" class="tab">Third Tab</label>

  <div class="tabContent tab1" id="first">
    First Tab
  </div>
  <div class="tabContent tab2" id="second">
    Second Tab
  </div>
  <div class="tabContent tab3" id="third">
    Third Tab
  </div>
</div>

CSS

#overallDiv {
  font-size: 0;
}
.tab {
  background-color: yellow;
  display: inline-block;
  width: calc(100% / 3);
  height: 50px;
  outline: 1px green solid;
  font-size: 14px;
}

.tabContent,
input {
  display: none;
}

.tab1:checked ~ .tab1,
.tab2:checked ~ .tab2,
.tab3:checked ~ .tab3 {
  display: block;
}