JSFiddle - React, Tailwind, and code Playground

HTML

<form>
  <input type="radio" id="one" name="radio" value="male" class="radio" checked><label for="one" class="label">1</label>
  <input type="radio" id="two" name="radio" value="female" class="radio"><label for="two" class="label">2</label>
  <input type="radio" id="three" name="radio" value="other" class="radio"><label for="three" class="label">3</label>
</form>

CSS

.radio {
  display:none;
}

.label {
  display:inline-block;
  padding:10px;
  margin:10px;
  cursor:pointer;
}

.label:before {
  content:"\2714";
  display:inline-block;
  border:1px solid #AAA;
  width:15px;
  height:15px;
  margin: 0 10px 0 0;
  line-height:100%;
  text-align:center;
  color:transparent;
}
.label:hover:before {
  border-color:#444;
}

.radio:checked + .label:before {
  border-color: #62B22B;
  background-color: #62B22B;
  color:#fff;
}