JSFiddle - React, Tailwind, and code Playground

HTML

<label for="ca">
    <div id="main_click">
        <input name="ca" id="ca" type="checkbox" />
      <p>
        Sean Presents
      </p>
        <label for="cb">
            <div id="clickablediv">
                <input name="cb" id="cb" type="checkbox" />
            </div>
        </label>
      <label for="cb">
            <div id="clickablediv">
                <input name="cb" id="cb" type="checkbox" />
            </div>
        </label>
      <label for="cb">
            <div id="clickablediv">
                <input name="cb" id="cb" type="checkbox" />
            </div>
        </label>
      <label for="cb">
            <div id="clickablediv">
                <input name="cb" id="cb" type="checkbox" />
            </div>
        </label>
      </div>
</label>

CSS

#clickablediv {
    width: 100px;
    height: 100px;
    background: blue;
  display: inline-block;
}
#main_click {
    width: 100%;
    height: 100%;
    background: lightgrey;
}

JavaScript

$('#clickablediv').click(function () {
    if ($(this).find('#cb').is(':checked')) {
        $(this).animate({
            opacity: 0.5,
        }, 250);
    } else {
        $(this).animate({
            opacity: 1
        }, 250);
    }
});

$('#main_click').click(function () {
    if ($(this).find('#ca').is(':checked')) {
        $(this).animate({
           background: green
        }, yellow);
    } else {
        $(this).animate({
            background:blue
        }, grey);
    }
});