JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<input type="radio" id="option_1_1" name="quest_1" />
<label for="option_1_1">Option 1</label>
        
<input type="radio" id="option_1_2" name="quest_1" />
<label for="option_1_2">Option 2</label>
        
<input type="radio" id="option_1_3" name="quest_1"  />
<label for="option_1_3">Option 3</label>

<div id="box_1_1">
<input type="radio" id="option_2_1" name="quest_2" />
<label for="option_2_1">Option 1</label>
        
<input type="radio" id="option_2_2" name="quest_2" />
<label for="option_2_2">Option 2</label>
        
<input type="radio" id="option_2_3" name="quest_2"  />
<label for="option_2_3">Option 3</label>

<div id="box_2_1">
</div>
</div>

CSS

#box_1_1, #box_2_1 {
  height: 100px;
  width: 100%; 
  display: none;
}

#box_1_1 {
  background: red;
  z-index: 1;
}

#box_2_1 {
  background: blue;
  z-index: 2;
}

#box_1_1, #box_2_1 {
  display: none;
}

input#option_1_1:checked ~ div#box_1_1 {
  display: block;
}

input#option_2_1:checked ~ div#box_2_1 {
  display: block;
}