JSFiddle - React, Tailwind, and code Playground

HTML

<li class="checkbox-select">
  <label for="id_0-tag_0">
    <input id="id_0-tag_0" name="0-tag" type="checkbox" value="44"> trendy
  </label>
</li>

CSS

input[type=checkbox] {
    display:none; 
}

label {
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
    
}

JavaScript

$('.checkbox-select').click(function (e) {    
  var checked_length = $(this).has(".checked").length;
    if( checked_length == 0 ) {
      $(this).find('[type=checkbox]').addClass('checked');
      $(this).find('[type=checkbox]').prop('checked', true);
      $(this).find('label').css({"font-style": "italic"});
      $(this).css("background-color", "#6CCACD");
    }
    else {
       $(this).find('[type=checkbox]').removeClass('checked');   
       $(this).find('[type=checkbox]').prop('checked', false);
       $(this).css("background-color", "#67517A");
       $(this).find('label').css({"font-style": ""});
    }
    e.preventDefault();
});