JSFiddle - React, Tailwind, and code Playground

by rudygotya

HTML

<label><input name="foo" type="checkbox" value="foo"/></label>
<label><input name="foo" type="checkbox" value="bar"/></label>
<div id="log">
</div>

CSS

label {
    display: block;
    padding: 2em;
    border: 2px solid #ccc;
    position: relative;
}
label:before {
    content: 'label';
    position: absolute;
    top: 50%;
    right: 1em;
    margin: -.5em 0 0;
    display: table;
}

label.active {
    background: red;
}

input {
    width: 100px;
}

#log {
    background-color: #ccc;
    padding: 2em;
}

JavaScript

$(function() {
    var $log = $('#log')
    $( 'label' ).on( 'click', function( ev ) {
        if( $( ev.target ).is(':checkbox') ) {
            ev.preventDefault();
            return;
        }
        
        $( this ).toggleClass( 'active' );
        
    });
    
    $( ':checkbox' ).on( 'click', function( ev ) {
        ev.stopPropagation();
    });
})