JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="radio-group">
    <li>
        <input id="choice-a" type="radio" name="g" />
        <label for='choice-a'> <span><span></span></span>Choice A</label>
    </li>
    <li>
        <input id="choice-b" type="radio" name="g" />
        <label for='choice-b'> <span><span></span></span>Choice B</label>
    </li>
    <li>
        <input id="choice-c" type="radio" name="g" />
        <label for='choice-c'> <span><span></span></span>Choice C</label>
    </li>
    <li>
        <input id="choice-d" type="radio" name="g" />
        <label for='choice-d'> <span><span></span></span>Choice D</label>
    </li>
</ul>

CSS

ul.radio-group li {
    position: relative;
    list-style: none;
    padding: 10px;
}
input[type="radio"] {
    opacity: 0;
    position: absolute;
}
/* Matches the direct descendant of a label preceded by a 
   radio button */
 input[type="radio"] + label > span {
    position: relative;
    border-radius: 12px;
    width: 14px;
    height: 14px;
    background-color: #FFFFFF;
    border: 1px solid #bcbcbc;
    margin: 0 1em 0 0;
    display: inline-block;
    vertical-align: middle;
}
/* Matches a span contained by the direct descendant 
   of a label preceded by a checked radio button */
 input[type="radio"]:checked + label > span span {
    display: inline-block;
    width: 10px;
    height: 10px;
    position: absolute;
    left: 2px;
    top: 2px;
    border-radius: 10px;
    border: none;
    background: #e00e17;
}

JavaScript

var controlRadios = function (name) {
    var allRadios = document.getElementsByName(name);
    var scopeRadio;
    var x = 0;
    for (x = 0; x < allRadios.length; x++) {
        allRadios[x].onclick = function () {
            if (scopeRadio == this) {
                this.checked = false;
                scopeRadio = null;
            } else {
                scopeRadio = this;
            }
        };
    }
}("g");