JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <input type="checkbox" id="x" />
        <img src="" alt="" />
        <label for="x">User</label>
    </li>
    <li>
        <input type="checkbox" id="y" />
        <img src="" alt="" />
        <label for="y">User</label>
    </li>
    <li>
        <input type="checkbox" id="z" />
        <img src="" alt="" />
        <label for="z">User</label>
    </li>

CSS

li {
    background: #ccc;
    width: 200px;
    height: 200px;
    margin-bottom: 10px;
}

JavaScript

var lis = document.getElementsByTagName('li');

for( var i = 0, l = lis.length; i < l; i++ ) {
    lis[i].onclick = function(e) {
        
        var e = e || window.event
          , el = e.target || e.srcElement;
        
        if ( el.nodeName == 'INPUT' ) return;
          
        var c = this.getElementsByTagName('input')[0];
        
        if ( c.checked )
            c.checked = false;
        else
            c.checked = true;
        
        return false;
    };
}