JSFiddle - React, Tailwind, and code Playground

by Bateman

HTML

<div class="radio-container">
  <input type="radio" name="r" id="first" value="1" checked="true">
  <label for="first">first</label>
</div>

<div class="radio-container">
  <input type="radio" name="r" id="second" value="2">
  <label for="second">second</label>
</div>

CSS

.radio-container input[type=radio] {
  display: none;
}

.radio-container label:before {
  content: '';
  display: inline-block;
  background: #ccc;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
}

.radio-container input[type=radio]:checked + label:before {
  background: blue;
}