JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <input type="radio" name="win" id=""/>
Windows
    <br/><br/>
<input type="radio" name="mac" id=""/>
Mac    
    <br/><br/>
        <input type="radio" name="mac" id=""/>
Linux
    </div>

<div class="box2">
    Dark Colors? 
    <input type="checkbox" checked="checked" name="colors" id=""/>
</div>

CSS

.fakeRadio {
    width:20px;
    height: 20px;
    background:#222;
    display: inline-block;
    margin-left:20px;
}
.fakeRadioOn { background: green; }

.fakeCheck {
    width:20px;
    height: 20px;
    background:#222;
    display: inline-block;
    margin-left:-20px;
    
}
.fakeCheckOn { background: green; }

JavaScript

$.fn.fakeRadio = function() {
    
    //create the new element
    $(this).after('<div class="fakeRadio"></div>');
    
    $('.fakeRadio').click(function(){
        $(this).prev('input').click();
        $('.fakeRadioOn').removeClass('fakeRadioOn');
        $(this).addClass('fakeRadioOn');
    });        
    return this;
};

$.fn.fakeCheck = function() {
    
    //create the new element
    $(this).after('<div class="fakeCheck"></div>');
    
    if($(this).is(':checked')){
        $('.fakeCheck').addClass('fakeCheckOn')
    };
    
    $('.fakeCheck').click(function(){
        $(this).prev('input').click();
        $(this).toggleClass('fakeCheckOn');
    });        
    return this;
};

$('.box input').fakeRadio();
$('.box2 input').fakeCheck();