JSFiddle - React, Tailwind, and code Playground
HTML
<li class="checkbox-select">
<label for="id_0-tag_0">trendy</label><input id="id_0-tag_0" name="0-tag" type="checkbox" value="44">
</li>
CSS
input[type=checkbox] {
display:none;
}
JavaScript
$('.checkbox-select').click(function () {
var litem = $(this);
var chk = litem.find('[type=checkbox]');
var lbl = litem.find('label');
var checked = chk.is(':checked');
if(!checked) {
chk.addClass('checked');
chk.prop('checked', true);
lbl.css({"font-style": "italic"});
litem.css("background-color", "#6CCACD");
}
else {
chk.removeClass('checked');
chk.prop('checked', false);
litem.css("background-color", "#67517A");
lbl.css({"font-style": ""});
}
});