JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <fieldset id="colors">
        <label for="red">Reddish</label>
        <input type="checkbox" name="colors[]" value="rgb(255, 80, 150)" id="red">
        <label for="blue">Light blue</label>
        <input type="checkbox" name="colors[]" value="rgb(200, 230, 255)" id="blue">
        <label for="green">Green</label>
        <input type="checkbox" name="colors[]" value="green" id="green">
    </fieldset>
    <input type="submit">
</form>

CSS

.color {
    float: left;
    text-align: center;
    width: 4em;
    height: 3em;
    cursor: pointer;
    border: 1em solid white;
    padding: 0.5em;
}
.color.selected {
    border: 0px solid transparent;
    padding: 1.5em;
}

JavaScript

function colorsSelect(contextId, checkboxName, className) {
    function addRemove(event) {
        event = event || window.event;
        var label = event.target ? event.target : event.srcElement;
        if (label.className.contains(' selected')) {
            label.className = label.className.replace(' selected', '');
        } else {
            label.className += ' selected';
        }
    }

    var context = document.getElementById(contextId);
    var labels = context.getElementsByTagName('label');
    for (var i = 0; i < labels.length; i++) {
        var label = labels[i];
        var id = label.htmlFor;
        var checkbox = document.getElementById(id);
        if (checkbox.name == checkboxName) {
            label.onclick = addRemove;
            label.style.backgroundColor = checkbox.value;
            checkbox.style.display = 'none';
            label.className += ' ' + className;
            if (checkbox.checked) {
                label.className += ' selected';
            }
        }
    }
}

// zakomentuj a uvidíš, jak to vypadá bez JS
colorsSelect('colors', 'colors[]', 'color');