JSFiddle - React, Tailwind, and code Playground
HTML
<div class="grid-100">
<div class="tckt-tab active">
<input type="radio" name="one" value="one">one
</div>
</div>
<div class="grid-100">
<div class="tckt-tab">
<input type="radio" name="two" value="two">two
</div>
</div>
<div class="grid-100">
<div class="tckt-tab">
<input type="radio" name="three" value="three">three
</div>
</div>
CSS
.tckt-tab{
padding: 10px 10px;
background-color: gray;
margin-bottom: 10px;
}
JavaScript
$(document).ready(function () {
$(".tckt-tab").click(function () { //when click on flip radio button
if ($(this) == $(this).find('input:radio').prop('checked', false)) {
$(this).find('input:radio').prop('checked', true);
}
});
$(".tckt-tab").click(function () { //when click on flip radio button
if ($(this) == $(this).find('input:radio').prop('checked', true)) {
$(this).find('input:radio').prop('checked', false);
}
});
});