JSFiddle - React, Tailwind, and code Playground

HTML + CSS Only Tabs

by nilloc

HTML

<div class="tabs">
  <input type="radio" name="top-tab" id="tab1" checked>
  <label for="tab1">Tab 1</label>
  <input type="radio" name="top-tab" id="tab2">
  <label for="tab2">Tab 2</label>
  <input type="radio" name="top-tab" id="tab3">
  <label for="tab3">Tab 3</label>
  
  <!-- <div class="tab-contents"> -->
    <div class="tab-content" data-tab-id= "tab1">
      <h2>Tab 1 Content</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
    </div>

    <div class="tab-content" data-tab-id= "tab2">
      <h2>Tab 2 Content</h2>
      <p>Voluptatum odio architecto obcaecati ex error, officia earum illum veritatis consectetur sed.</p>
    </div>

    <div class="tab-content" data-tab-id= "tab3">
      <h2>Tab 3 Content</h2>
      <p>Pariatur blanditiis incidunt accusamus quos saepe at numquam, doloribus voluptas?</p>
    </div>
  <!-- </div> -->
  
  
</div>

CSS

*, *::before, *::after{
  box-sizing:border-box;
}

.tabs{
  position:relative;
}

.tab-content{
  clear:left;
  border:1px solid gray;
  padding:10px;
  position:relative;
  top:-1px;
  z-index:-1;
}

.tab-content{
  overflow:hidden;
}

.tabs label{
  display:inline-block;
  float:left;
  padding:10px;
  border:1px solid gray;
  background:#ccc;
  cursor:pointer;
  margin-right:-1px;
  user-select:none;
}
.tabs label:last-of-type{
  margin-right:0;
}

.tabs label:hover{
  background:#999
}

.tabs input[type="radio"]:checked + label{
  background:#fff;
  cursor:default;
  border-bottom: none;
  padding-bottom:11px;
}

.tabs input[type="radio"]{
  position:absolute;
  display:block;
  top:0;
  left:0;
  opacity:0;
  z-index:-1;
}

.tabs input[type="radio"] ~ .tab-content{
  display:none;
}

.tabs input#tab1[type="radio"]:checked ~ div[data-tab-id="tab1"]{
  display:block;
}
.tabs input#tab2[type="radio"]:checked ~ div[data-tab-id="tab2"]{
  display:block;
}
.tabs input#tab3[type="radio"]:checked ~ div[data-tab-id="tab3"]{
  display:block;
}