JSFiddle - React, Tailwind, and code Playground

by Daniel Tan

HTML

<body>
  <section>
   <input type="radio" name="nav" id="aBtn" />
   <label for="aBtn">
    <span>A</span>
    <div>
      <span>A</span>
    </div>
   </label>
  </section>
  <section>
   <input type="radio" name="nav" id="bBtn" />
   <label for="bBtn">
    <span>B</span>
    <div>
      <span>B</span>
    </div>
   </label>
  </section>
  <section>
   <input type="radio" name="nav" id="cBtn" />
   <label for="cBtn">
    <span>C</span>
    <div>
      <span>C</span>
    </div>
   </label>
  </section>
 </body>

CSS

input[type="radio"]:checked + label>div { background-color: #00A; }
input[type="radio"]:checked + label>span { color: #A00; }