JSFiddle - React, Tailwind, and code Playground

by Hector de la Rosa

HTML

<div id="radio_r23" class="radioB" disabled>
 <label class="radio__box" for="Correcto_califica_r23">Cumplimiento r_23
    <input type="radio" name="califica_r23" id="Correcto_califica_r23" class="califica_rbC" value="1">
    <span class="check"></span>
 </label>

 <label class="radio__box" for="Incorrecto_califica_r23">Incumplimiento r_23
    <input type="radio" name="califica_r23" id="Incorrecto_califica_r23" class="califica_rbC" value="0">
    <span class="check"></span>
 </label>
</div>

<input type='buton' value="buttton" action="" >

CSS

.radioB input[type="radio"] {
    display: none;
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.radio__box {
    position: relative;
    display: inline-block;
    cursor: pointer;
    color: #0074D9;
    padding: 5px 15px 5px 49px;
    font-size: 1em;
    cursor: pointer;
}

.check {
    position: absolute;
    top: 0;
    left: 0;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background-color: #eee;
}

.radio__box:hover input[type="radio"]~.check {
    background-color: #bbb;
}

.radio__box input[type="radio"]:checked~.check {
    background-color: #0074D9;
}

.check:after {
    content: "";
    position: absolute;
    display: none;
}

.radio__box input[type="radio"]:checked~.check:after {
    display: block;
}

.radio__box .check:after {
    top: 9px;
    left: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: white;
}

JavaScript

var califica_rb = document.querySelector('input[name='califica_r' +i]:checked').value;