JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tabs">
        <li>
          <input type="radio" checked name="tabs" id="tab1">
          <label for="tab1">tab 1</label>
          <div id="tab-content1" class="tab-content">
zsdre es rs rse se8 hse0 hserh se fsef sef sef se fes fse3sf sef sef se  esf sefse fse fsef  93wr0wh rwh w8hdwedwe dwe zsdre es rs rse se8 hse0 hserh se fsef sef sef se fes fse3sf sef sef se  esf sefse fse fsef  93wr0wh rwh w8hdwedwe dwe zsdre es rs rse se8 hse0 hserh se fsef sef sef se fes fse3sf sef sef se  esf sefse fse fsef  93wr0wh rwh w8hdwedwe dwe zsdre es rs rse se8 hse0 hserh se fsef sef sef se fes fse3sf sef sef se  esf sefse fse fsef  93wr0wh rwh w8hdwedwe dwe 
          </div>
        </li>
        <li>
          <input type="radio" name="tabs" id="tab2">
          <label for="tab2">tab 2</label>
          <div id="tab-content2" class="tab-content">
            Tab Content 2
          </div>
        </li>
        <li>
          <input type="radio" name="tabs" id="tab3">
          <label for="tab3">tab 3</label>
          <div id="tab-content3" class="tab-content">
            Tab Content 3
          </div>
        </li>
            
            <li>
          <input type="radio" name="tabs" id="tab4">
          <label for="tab4">tab 4</label>
          <div id="tab-content4" class="tab-content">
            Tab Content 4
          </div>
        </li>
              
</ul>

CSS

.tabs input[type=radio] {
          display:none;
      }
      .tabs {
        
        list-style: none;
        position: relative;
        padding: 0;
        margin: 75px auto;
      }
      .tabs li{
        float: left;
      }
      .tabs label {
          display: block;
          padding: 10px 20px;
          border-radius: 2px 2px 0 0;
          color: #000;
          font-size: 24px;
          font-weight: normal;
          background: rgba(0,0,0,0.2);
          cursor: pointer;
          position: relative;
          margin-top:3px;
          -webkit-transition: all 0.2s ease-in-out;
          -moz-transition: all 0.2s ease-in-out;
          -o-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
      }
      .tabs label:hover {
        background:  #0a71a5;
    color:#fff;
        top: 0;
      }
       
      [id^=tab]:checked + label {
        background:  #0a71a5;
        color: white;
        top: 0;
      }
       
      [id^=tab]:checked ~ [id^=tab-content] {
          display: block;
      }
      .tab-content{
        z-index: 2;
        display: none;
        text-align: left;
        font-size: 20px;
        padding-top: 10px;
        background: #0a71a5;
        padding: 15px;
        color: white;
        position: absolute;
        top: 51px;
        left: 0;
    right:0;
        box-sizing: border-box;
        -webkit-animation-duration: 0.5s;
        -o-animation-duration: 0.5s;
        -moz-animation-duration: 0.5s;
        animation-duration: 0.5s;
      }