JSFiddle - React, Tailwind, and code Playground

by tms

HTML

<div class="no-checkedselector">
    <div class="toggle-container">
       <input id="toggle-on" class="toggle toggle-left" name="toggle" type="radio" checked>
       <label for="toggle-on" class="btn">On</label>
       <input id="toggle-off" class="toggle toggle-right" name="toggle" type="radio">
       <label for="toggle-off" class="btn">Off</label>
    </div>
</div>

CSS

body {
    font-family: sans-serif;
}

input[type="radio"].toggle {
    position: absolute;
    left: -99em;
}

input[type="radio"].toggle + label {
    display:inline-block;
    text-align:center;
    padding:3px 0px;
    width:2.0em;
}

/*input[type="radio"].toggle:checked + label,*/ input[type="radio"].toggle.checked + label {
    background-color:#404040;
    color:#F7F7F7;
}

JavaScript

$('.no-checkedselector').on('change', 'input[type="radio"].toggle', function () {
    if (this.checked) {
        $('input[name="' + this.name + '"].checked').removeClass('checked');
        $(this).addClass('checked');
        $('.toggle-container').addClass('force-update').removeClass('force-update');
    }
});
$('.no-checkedselector input[type="radio"].toggle:checked').addClass('checked');