JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tabs">
  <li><label for="tab1">Tab1</label></li>
  <li><label for="tab2">Tab2</label></li>
  <li><label for="tab3">Tab3</label></li>
</ul>
<div class="tabs_content">
  <input type="radio" name="tabs" id="tab1" checked>
  <div>Tab1</div>
  <input type="radio" name="tabs" id="tab2">
  <div>Tab2</div>
  <input type="radio" name="tabs" id="tab3">
  <div>Tab3</div>
</div>

CSS

.tabs{
  margin:0;
  padding:0;
  list-style-type:none;
}
.tabs>li{
  display:inline-block;
}
.tabs>li label{
  cursor:pointer;
}
.tabs_content{
  border:1px solid #bbb;
}
.tabs_content>input{
  position:absolute;
  display:inline-block;
  margin:0;
  padding:0;
  width:0;
  height:0;
  border:0;
  opacity:0;
}
.tabs_content>input:checked+div{
  display:block;
}
.tabs_content>div{
  display:none;
}