JSFiddle - React, Tailwind, and code Playground

HTML

<label for="abc">age<span style="color: red;">*</span></label>
<div class="form-check">
  <div class="tgl-radio-tabs">
    <input id="x" type="radio" class="form-check-input tgl-radio-tab-child" name="abcorigin"><label for="x" class="radio-inline"><18</label>
    <input id="y" type="radio" class="form-check-input tgl-radio-tab-child" name="abcorigin"><label for="y" class="radio-inline">21+</label>
  </div>
</div>

CSS

input.tgl-radio-tab-child {
  position: absolute;
  left: -99999em;
  top: -99999em;
  opacity: 1;
  z-index: 1;
}

input.tgl-radio-tab-child+label {
  cursor: pointer;
  float: left;
  border: 1px solid #aaa;
  margin-right: -1px;
  padding: .5em 1em;
  position: relative;
}

input.tgl-radio-tab-child+label:hover {
  background-color: #eee;
}

[type=radio]:checked+label {
  background-color: #c30;
  z-index: 1;
}