JSFiddle - React, Tailwind, and code Playground
HTML
<input type="radio" name="DisplayOption" value="column" class="DisplayOption" checked>
<input type="radio" name="DisplayOption" value="table" class="DisplayOption">
<input type="radio" name="DisplayOption" value="details" class="DisplayOption">
<div class="column"> The first div is being displayed </div>
<div class="table"> The second div is being displayed</div>
<div class="details"> The third div is being displayed </div>
CSS
div{
display:none;
}
input[value="column"]:checked ~ .column,
input[value="table"]:checked ~ .table,
input[value="details"]:checked ~ .details{
display: block;
}