JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<input type="radio" name="tab" id="tab1" checked="checked">
<input type="radio" name="tab" id="tab2">
<input type="radio" name="tab" id="tab3">
<label for="tab1">Tab1</label>
<label for="tab2">Tab2</label>
<label for="tab3">Tab3</label>

<div class="tab1">
  <ul class="tab-container">
vfdfdf2232323
  </ul>
</div>
<div class="tab2">
  <ul class="tab-container">
223232323
  </ul>
</div>
<div class="tab3">
  <ul class="tab-container">
gffdgdfgfd
  </ul>
</div>

CSS

ul.tab-container {
  opacity: 0;
}
#tab1:checked ~ div.tab1 ul.tab-container,
#tab2:checked ~ div.tab2 ul.tab-container,
#tab3:checked ~ div.tab3 ul.tab-container {
  opacity: 1;
}