JSFiddle - React, Tailwind, and code Playground

HTML

<label class="toggle" for="color_Black">
    <div style="background-color: #000000" class="color">
        <div class=CheckMark>&#10003;</div>
        <input type="checkbox" name="color[]" value="Black" id="Checkbox1" class="cbx"/> 
    </div> Black
</label>

CSS

.color { border: 1px solid silver; vertical-align:baseline; margin-right:4px; width: 1.65em; height:1.65em; font-size:8px;float:left;  }
.color input {height: 100%; width: 100%; font-size:200%;}
.ColorboxSelected {opacity: 0.5; filter: alpha(opacity = 50);}  
.ColorboxSelected .CheckMark {visibility: visible; }        
.CheckMark {position:relative; top:-2px; vertical-align:middle; text-align:center ; color:white; font-family: Arial Narrow; font-size:1.6em;  display:block; visibility:hidden; }   /* text-shadow: black 0.1em 0.1em 0.2em;*/
.cbx { visibility:hidden; display:none;}

JavaScript

$(".toggle").on("click", function toggle_colorbox() {
    $div = $(this).children('div');
    $cb = $(this).find('input');
    $innerdiv = $div.find('div');
   
    if (!$cb.is(':checked')) {    
        $innerdiv.show();
        $div.addClass("ColorboxSelected");
        $cb.prop('checked', true);
    }
    else {
        $innerdiv.hide();
        $div.removeClass("ColorboxSelected");
        $cb.prop('checked', false);
    }
});