JSFiddle - React, Tailwind, and code Playground
HTML
<input type="radio" name="d" id="d" checked />
<label for="d">CHeck</label><br/><br/>
<input type="radio" name="d" id="dd">
<label for="dd">CHeck2</label>
CSS
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 32px;
}
input[type=radio] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
position: absolute;
padding:1px;
left: 0;
border:1px solid black;
border-radius: 50px;
}
input[type=radio]:checked + label:before {
border:1px solid blue;
background-color:blue;
box-shadow: 0 0 0 3px #fff inset;
width: 20px;
height: 20px;
}