JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<div class="custom-radio-input">
  <input class="form-check-input" type="radio" name="radiobutton">
</div>
<div class="custom-radio-input">
  <input class="form-check-input" type="radio" name="radiobutton">
</div>

CSS

.custom-radio-input {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5rem;
}

.custom-radio-input .form-check-input {
  cursor: pointer;
}

.custom-radio-input .form-check-input:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: -1px;
  left: -1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid grey;
  background-color: grey;
}

.custom-radio-input .form-check-input:checked:before {
  background-color: blue;
}

.custom-radio-input .form-check-input:checked:after {
  border-radius: 50%;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 3px;
  left: 3px;
  content: " ";
  display: block;
  background: red;
  border: 2px solid #fff;
}