JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>
<label for='div'></label>

CSS

div {
    width: 15px;
    height: 15px;
    background: #4a4a4a;
    cursor: pointer;
}

.enter {
    background: #656565;
}

.active {
    background: #96f226 !important;
}

JavaScript

/*$('div').mouseenter(function(){
    $(this).addClass("enter");
});
$('div').mouseleave(function(){
    $(this).removeClass("enter");
});*/
$('div').click(function(){
    $(this).toggleClass('active');
});