JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapperCheckbox">
    <input type="checkbox">
</div>

CSS

input[type=checkbox] {
    display: none;
}
.wrapperCheckbox {
    width: 2em;
    height: 2em;
    background: red;
}
.wrapperCheckbox.checked {
    background: blue;
}

JavaScript

$('.wrapperCheckbox').click(function () {
    var checkbox = $(this).find('input[type="checkbox"]');
    var checked;
    $(this).toggleClass('checked');
    if(checkbox.is(':checked')){
        checked = false;
    }
    else {
        checked = true;
    }
    
    checkbox.attr('checked', checked);        
    
});