JSFiddle - React, Tailwind, and code Playground

by will

HTML

<label for="one"><input type="checkbox" id="one"></label>
<label for="two"><input type="checkbox" id="two" checked></label>
<label for="three"><input type="checkbox" id="three"></label>

CSS

label{
    display:inline-block;
    position:relative;
    width:20px;
    height:20px;
    background:#ccc;
    cursor: pointer;
}

label input {
    position: absolute;
    top:-30px;
    opacity:0;
}

label:hover {
    background: red;
}

label.checked {
    background: blue;
}

JavaScript

$('label').each(function(){
    if( $(this).children('input').is(':checked') ){
        $(this).addClass('checked');
    }
});

$('label').click(function(){
    
    if( $(this).children('input').is(':checked') ){
       
       $(this).addClass('checked');
       
    }else{
        
        $(this).removeClass('checked');
        
    }
    
});