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; 
}

JavaScript

$('.checkbox-select').click(function () {
  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": ""});
    }
        });