JSFiddle - React, Tailwind, and code Playground

HTML

Use case: change the coloration of the main container based on the picked choice. Useful when dealing with quizes and you want to apply some decoration based on  the response. 
<br>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nunc neque. Aliquam sit amet leo id orci efficitur consectetur eu nec ex. Nam eget vehicula neque. Vestibulum ipsum purus, ornare id tellus vel, pellentesque porta tortor. Pellentesque nec faucibus lacus. Aliquam sit amet aliquam est, u</p>
<div>
<input type="radio"  name="choice1" value="yes" id="yes1"> <label style="--c:lightblue" for="yes1">Yes</label>
<input type="radio"  name="choice1" value="yes" id="no1"> <label style="--c:lightyellow" for="no1">No</label>
</div>
</div>

<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nunc neque. Aliquam sit amet leo id orci efficitur consectetur eu nec ex. Nam eget vehicula neque. Vestibulum ipsum purus, ornare id tellus vel, pellentesque porta tortor. Pellentesque nec faucibus lacus. Aliquam sit amet aliquam est, u</p>
<div>
<input type="radio"  name="choice2" value="yes" id="yes2"> <label style="--c:lightgreen" for="yes2">Yes</label>
<input type="radio"  name="choice2" value="yes" id="no2"> <label style="--c:lightgrey" for="no2">No</label>
</div>
</div>

CSS

.container {
  width:300px;
  display:inline-block;
  padding:20px;
  border:2px solid;
  position:relative;
}

label::before {
  content:"";
  position:absolute;
  z-index:-1;
  bottom:0;
  left:0;
  right:0;
  top:0;
  background:var(--c);
  opacity:0;
  transition:0.5s;
}
input:checked + label::before {
  opacity:1;
}