JSFiddle - React, Tailwind, and code Playground

HTML

<input class="tab" id="first-tab" type="radio" name="tab" checked="checked">
<label class="tab-label" for="first-tab">First</label>

<input class="tab" id="second-tab" type="radio" name="tab">
<label class="tab-label" for="second-tab">Second</label>

<input class="tab" id="third-tab" type="radio" name="tab">
<label class="tab-label" for="third-tab">Third</label>

<input class="tab" id="fourth-tab" type="radio" name="tab">
<label class="tab-label" for="fourth-tab">Fourth</label>

<div class="wrapper">
  <article class="first-tab content">
    <h1>F</h1>
    <h1>F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-F-First heading</h1>
    <p>
      <b>Bacon</b> <i>ipsum</i> <s>dolor</s> <span class="sit">sit</span> amet pastrami dolor tri-tip, magna tongue ullamco occaecat velit shoulder sunt elit. Non cillum turkey short loin beef ribs. Anim qui shankle short ribs pancetta boudin. Occaecat mollit in laboris ham hock bresaola corned beef flank hamburger aute chicken id t-bone.
    </p>
    
    <form>
      <label><input type="radio" name="contentinput">First</label>
      <label><input type="radio" name="contentinput">Second</label>
    </form>
  </article>
 
  <article class="second-tab content">
    <h1>Second heading</h1>
    <p>
      Bacon ipsum dolor sit amet pastrami dolor tri-tip, magna tongue ullamco occaecat velit shoulder sunt elit. Non cillum turkey short loin beef ribs. Anim qui shankle short ribs pancetta boudin. Occaecat mollit in laboris ham hock bresaola corned beef flank hamburger aute chicken id t-bone.
    </p>
  </article>
  
  <article class="third-tab content">
    <h1>Third heading</h1>
    <p>
      Bacon ipsum dolor sit amet pastrami dolor tri-tip, magna tongue ullamco occaecat velit shoulder sunt elit. Non cillum turkey short loin beef ribs. Anim qui shankle short ribs pancetta boudin. Occaecat mollit in laboris ham hock bresaola corned beef flank hamburger aute chicken id t-bone.
    </p>
 ...

CSS

@keyframes tabopacity {
  50% {background-color: rgba(102, 102, 102, 0.3);}
  to {background-color: rgba(102, 102, 102, 0.5);}
}

@keyframes contentopacity {
  from {opacity: 0;}
  50% {opacity: 0.5;}
  to {opacity: 1;}
}

#first-tab:checked + .tab-label[for="first-tab"] + #second-tab + .tab-label[for="second-tab"] + #third-tab + .tab-label[for="third-tab"] + #fourth-tab + .tab-label[for="fourth-tab"] + .wrapper > .first-tab {
  display: block;
}

#second-tab:checked + .tab-label[for="second-tab"] + #third-tab + .tab-label[for="third-tab"] + #fourth-tab + .tab-label[for="fourth-tab"] + .wrapper > .second-tab {
  display: block;
}

#third-tab:checked + .tab-label[for="third-tab"] + #fourth-tab + .tab-label[for="fourth-tab"] + .wrapper > .third-tab {
  display: block;
}

#fourth-tab:checked + .tab-label[for="fourth-tab"] + .wrapper > .fourth-tab {
  display: block;
}

.content {
  display: none;
}

.tab {
  display: none;
}

.tab-label {
  background-color: #808080;
  color: white;
}

.tab-label {
  display: inline-block;
  width:20%;
  text-align: center;
}

.tab:checked + label {
  background-color: #0080ff;
}

.tab-label:hover {
  animation: tabopacity 1s linear 1;
  animation-fill-mode: forwards;
}

.wrapper {
  border: solid 1px #0080ff;
  border-top: solid 5px #0080ff;
  background: #f4f7e3;
  border-radius: 0 0 5px 5px;
}

.content {
  animation: contentopacity 1s linear 1;
  animation-fill-mode: forwards;
}

.sit {
  font-size:33px;
}