JSFiddle - React, Tailwind, and code Playground

HTML

<p>Choose a color:</p>
<label><input type="checkbox" checked="checked">Blue</label>
<label><input type="checkbox" checked="checked">Red</label>
<label><input type="checkbox" checked="checked">Yellow</label>
<p id="result">Awaiting a checkbox click...</p>

CSS

label {
    display: block;
    margin: 7px 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
label:hover {
    cursor: pointer;
}
#result {
    border: 1px solid #bbbbbb;
    padding: 7px 10px;
    color: gray;
}

JavaScript

$('label').click(function() {
    var color = $(this).text();
    if ($(this).children().is(':checked')) {
        $('#result').html('You checked <strong>' + color + '</strong>');
    } else {
        $('#result').html('You removed the check from <strong>' + color + '</strong>');
    }
});