JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" name="myCheckbox" checked="checked" />
<label>the box below is red when checked, and blue when unchecked</label>
<br />
<div id="myDiv"></div>

CSS

input, label {
    display: inline
}
#myDiv {
    background-color: red;
    width: 200px;
    height: 100px;
    display: block;
}

JavaScript

document.addEventListener("DOMContentLoaded", function (event) {
    var _selector = document.querySelector('input[name=myCheckbox]');
    _selector.addEventListener('change', function (event) {
        if (_selector.checked) {
            document.getElementById("myDiv").style.backgroundColor = "red";
        } else {
            document.getElementById("myDiv").style.backgroundColor = "blue";
        }
    });
});