JSFiddle - React, Tailwind, and code Playground

HTML

<div class="label-radio">
    <input type="radio" name="radio" id="rad0" value="rad0" checked="checked">
    <label for="rad0">check radio 0</label>
</div>
<div class="label-radio">
    <input type="radio" name="radio" id="rad2" value="rad2">
    <label for="rad2">check radio 2</label>
</div>

CSS

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    width: 90%;
    margin: 20px auto;
}
.label-radio{
    display: inline-block;
}
.label-radio + .label-radio{
    margin-left: 10px;
}
.label-radio input{
    position: absolute;
    display: none;
}
.label-radio label{
    position: relative;
    display: block;
    padding-left: 30px;
    vertical-align: middle;
    cursor: pointer;
}
.label-radio label:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #c0c0c0;
    transition: all .3s;
}
.label-radio label:after{
    content: '';
    position: absolute;
    top: 7px;
    left: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #3e97eb;
    /* display: none; */
    opacity: 0;
    transition: all .3s;
}
.label-radio label:hover:before{
    border-color: #3e97eb;
}
.label-radio input:checked+label:after{
    /* display: block; */
    opacity: 1;
}
.label-radio input:checked+label:before{
    border: 1px solid #3e97eb;
}