JSFiddle - React, Tailwind, and code Playground

HTML

<div id="FS1">
    External fieldset with radiobuttons
    <div class="row">
      <input checked="checked" id="R1" name="Group1" type="radio" value="1" />
      <label for="R1">Element 1</label>
      <input id="R2" name="Group1" type="radio" value="2" />
      <label for="R2">Element 2</label>
      <input id="R3" name="Group1" type="radio" value="3" />
      <label for="R3">Element 3</label>
 
 <fieldset class="fs" id="FS1-1">
      <legend>Header element 1</legend>
      <div class="form-group">
        <input class="form-control" id="exampleInputText1" type="text" />
        <label for="exampleInputText1">Input field in the first element</label>
      </div>
    </fieldset>
    <fieldset class="fs" id="FS1-2">
      <legend>Header element 2</legend>
      <div class="form-group">
        <input class="form-control" id="exampleInputText2" type="text" />
        <label for="exampleInputText2">This is the input field for the second</label>
      </div>
    </fieldset>
    <fieldset class="fs" id="FS1-3">
      <legend>Header element 3</legend>
      <div class="form-group">
          <input class="form-control" id="exampleInputText3" type="text" />
          <label for="exampleInputText3">And this is the last input field</label>
        </div>
    </fieldset>
</div>     </div>

CSS

#FS1 div input:not(:checked) ~ #FS1-1, #FS1-2, #FS1-3, #FS1-4, #FS1-5 { display: none; } /* to hide all the fieldset */
#FS1 div input[value="1"]:checked ~ #FS1-1 { display: block; } /* to show only the 1th elem */
#FS1 div input[value="2"]:checked ~ #FS1-2 { display: block; } /* to show only the 2nd */
#FS1 div input[value="3"]:checked ~ #FS1-3 { display: block; } /* to show only the 3rd */
#FS1 div input[value="4"]:checked ~ #FS1-4 { display: block; } /* to show only the 4th */
#FS1 div input[value="5"]:checked ~ #FS1-5 { display: block; } /* to show only the 5th */