JSFiddle - React, Tailwind, and code Playground

HTML

<div class="radio_panels">
    <h1>Demo of checkbox hack for panelized sections</h1>
        <input type="radio" name="selecta" id="section1_chkbox" />
        <label for="section1_chkbox">My first section</label>
        <input type="radio" name="selecta" id="section2_chkbox" />
        <label for="section2_chkbox">My second section</label>
        <div id="section1" class="panel">
            <h2>My first section</h2>
            <p>The content for my awesome panel 1</p>
        </div>
        <div id="section2" class="panel">
            <h2>My second section</h2>
            <p>The content of panel 2</p>
        </div>
    </div>

CSS

.radio_panels [type="radio"] {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  clip: rect(1px 1px 1px 1px);
}
.radio_panels [type="radio"]:checked + label {
  background-color: black;
  color: white;
}
.radio_panels .panel {
  display: none;
  -webkit-animation:yellow-fade 3s;
  -moz-animation:yellow-fade 3s;
  animation:yellow-fade 3s;
}
.radio_panels #section1_chkbox:checked ~ #section1,
.radio_panels #section2_chkbox:checked ~ #section2 {
  display: block;
}

@-webkit-keyframes yellow-fade{
    5%{ background-color:#ff8; }
}

@-moz-keyframes yellow-fade{
    5%{ background-color:#ff8; }
}

@keyframes yellow-fade{
    5%{ background-color:#ff8; }
}