JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <div class="radio">
        <input id="check_me_1" name="radios" type=radio />
        <label for="check_me_1">Label for checkbox</label>
    </div>
    <div class="radio">
        <input id="check_me_2" name="radios" type=radio />
        <label for="check_me_2">Label el numero dos</label>
    </div>
</form>

CSS

div.radio {
    position: relative;
    font-family: Arial;
    font-size: 13px;
    margin-bottom: 8px;
}
div.radio::before {
    content : "";
    display: inline-block;
    width: 0px;
    height: 0px;
    border: solid 8px #9C9C9C;
    border-radius: 8px;
    position: absolute;
    top: 0px;
    left: 1px;
}

label {
    position: relative;
    padding-left: 20px;
}

label::before {
    content : "";
    display: inline-block;
    width: 0px;
    height: 0px;
    border: solid 7px white;
    border-radius: 7px;
    position: absolute;
    top: 1px;
    left: 2px;
}
label::after {
    content: "";
    width: 0px;
    height: 0px;
    border: solid 4px #666666;
    border-radius: 4px;
    position: absolute;
    left: 5px;
    top: 4px;
    display: none;
}

input[type=radio] {
    visibility: hidden;
    position: absolute;
}

input[type=radio]:checked + label::after {
    display: block;
}

input[type=radio]:active + label::before {
    border-color: #DDDDDD;
}