JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<div>
<input type="checkbox" id="test1" class="test"><label>Label for Checkbox 1</label>
</div>
<div>
<input type="checkbox" id="test2" class="test"><label>Label for Checkbox 2</label>
</div>

CSS

input[type=checkbox] { 
    display: inline-block;
    width: 100%;
    left: 0;
    position: relative;
    z-index: 1;
    opacity: 0;
}
label {
    position: absolute;
    left: 0;
    top: 0;
    color: black;
}

input[type=checkbox]:checked + label {
    color:red;
}
div {
  position: relative;
  border: 1px solid red;
}

JavaScript

$('input').on('click', function() {
console.warn(this);
console.log($(this).is(':checked'));
console.log($(this).prop('id'));
})