JSFiddle - React, Tailwind, and code Playground

HTML

<p>The colored square should be red when the box is not checked and blue when the box is checked.</p>

<div class="list-tile list-tile-single">
                                <label class="list-tile-action">
                                    <span class="list-tile-icon">
                                        <input type="checkbox" name="SelectedPrograms" value="BBA" onClick="ieRepaint(this)" />
                                        <span class="icon icon-checkbox"></span>
                                    </span>
                                    <span class="list-tile-text">
                                        <span class="list-tile-text-title">Label</span>
                                    </span>
                                </label>
                            </div>
<div id="js"></div>

<script>
    var ieRepaint = function(e) {
    if (e.checked === true) {
        e.parentNode.classList.add('is-checked');
    }
    else {
        e.parentNode.classList.remove('is-checked');
    }
}    
</script>

CSS

.icon {
    height: 24px;
    width: 24px;
    display: inline-block;
}

.icon-checkbox {
    background: blue;
}

:not(:checked) + .icon-checkbox {
    background: red;
}

.list-tile-icon input[type=checkbox] + .icon {
    display: block;
}

JavaScript

var ieRepaint = function(e) {
    if (e.checked === true) {
        e.parentNode.classList.add('is-checked');
    }
    else {
        e.parentNode.classList.remove('is-checked');
    }
}