JSFiddle - React, Tailwind, and code Playground

by Boba Poshtar

HTML

<p>
  <input type="radio" name="a" id="a1"> <label for="a1">blue</label>
  <span>
    <label><input type="radio" name="b"> deep blue</label><br>
    <label><input type="radio" name="b"> sky blue</label>
  </span>
  <input type="radio" name="a" id="a2"> <label for="a2">red</label>
</p>

CSS

span {
  display: block;
  position: relative;
  padding: 10px 0 10px 20px;
  opacity: 0.2;
}
span:after {
  content: "";
  position:absolute; left:0; top:0; width:100%; height:100%;
  z-index: 2;
  /*background: rgba(255,0,0,0.2);*/
}

input:checked ~ span {
  opacity: 1;
}
input:checked ~ span:after {
  display: none;
}