JSFiddle - React, Tailwind, and code Playground

HTML

<form type="post">
  <input type="radio" name="group" id="radio1" /> <label for="radio1">Radio Button One</label>
  <input type="radio" name="group" id="radio2" /> <label for="radio2">Radio Button Two</label>
  <input type="radio" name="group" id="radio3" /> <label for="radio3">Radio Button Three</label>
  <input type="radio" name="group" id="radio4" /> <label for="radio4">Radio Button Four</label>
</form>

CSS

input[type="radio"] {
  display: none;
}

input[type="radio"] + label {
  display: block;
  width: 200px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background-color: white;
}

input[type="radio"] + label:hover {
  background-color: blue;
  color: white;
}

input[type="radio"]:checked + label {
  background-color: red;
  color: white;
}