JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
      <div>
      <input type="checkbox" id="checkbox1" class="item"/>
      <label for="checkbox1">Label 1</label>
      </div>
       <div>
      <input type="checkbox" id="checkbox2" class="item"/>
      <label for="checkbox2">label 2</label>
      </div>
      <div>
      <input type="checkbox" id="checkbox3" class="item"/>
      <label for="checkbox3">label 3</label>
      </div>
    </div>

CSS

#container > div{
    -webkit-user-select:none;
}
input[type=checkbox] {
display:none;
}
 
input[type=checkbox] + label
{
background: #D9D9D9;
height: 40px;
width: 40px;
border-radius:20px;
display:inline-block;
padding: 0 0 0 0px;
cursor:pointer;
border:1px solid #00AAFF;
}
input[type=checkbox]:checked + label
{
background: #00B0F0;
height: 40px;
width: 40px;
border-radius:20px;
display:inline-block;
padding: 0 0 0 0px;
cursor:pointer;
}
label
{

}

JavaScript

$("#container").delegate("input[type=checkbox]", "change", function () {
    $(this).toggleClass('green');
    $(this).nextAll().toggleClass("green");
});

$(".item").click(function(){
        $(this).next().toggleClass("clipped");
});