JSFiddle - React, Tailwind, and code Playground
by brigand
HTML
<input id="INP_1" type="radio" name="options" class="hide">
<input id="INP_2" type="radio" name="options" class="hide">
<div class="btn-group btn-group-toggle mb-3" data-toggle="buttons">
<label for="INP_1" class="btn btn-secondary active">[] Comment</label>
<label for="INP_2" class="btn btn-secondary">[] Review</label>
</div>
<div class="comment-form">
<form>
...
</form>
</div>
<div class="review-form">
<form>
...
</form>
</div>
CSS
.hide {
position: absolute;
top: 0;
left: -10000px;
}
#INP_1:checked ~ * [for=INP_1] {
background: #ccf9c4;
}
#INP_2:checked ~ * [for=INP_2] {
background: #ccf9c4;
}
#INP_1:checked ~ .comment-form {
background: red;
}