JSFiddle - React, Tailwind, and code Playground

HTML

<div class="radio">
  <label>label</label>
</div>

CSS

.radio {
  display: table;
  border-spacing: 10px;
  margin: 0 -10px;
  position: relative;
 }

.radio:before {
  display: table-cell;
  vertical-align: middle;
  height: 250px;
  width: 250px;
  border: 2px solid blue;
  border-radius: 50%;
  content: "";
  position: absolute;
  box-shadow: inset 0px 0px 10px 1px yellow;
}

.radio:after {
  display: table-cell;
  vertical-align: middle;
  height: 10px;
  width: 10px;
  background: red;
  border-radius: 50%;
  content: "";
  position: absolute;
  left: 16.5px;
  top: 16.5px;
}

.radio > label {
  display: table-cell;
  vertical-align: middle;
  position: absolute;
  left: 42px;
  top: 12px;
}