JSFiddle - React, Tailwind, and code Playground

by Avinashullal

HTML

<input type="checkbox" name="checkboxG1" id="checkboxG1" class="css-checkbox" data-box-id="###" />
<label for="checkboxG1" class="css-label"></label>

CSS

input[type=checkbox].css-checkbox {
  position: absolute;
  z-index: -1000;
  top: -1000px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

input[type=checkbox].css-checkbox + label.css-label {
  padding-left: 43px;
  height: 29px;
  display: inline-block;
  line-height: 29px;
  background-repeat: no-repeat;
  background-position: 0 0;
  font-size: 25px;
  vertical-align: middle;
  cursor: pointer;
}

input[type=checkbox].css-checkbox:checked + label.css-label {
  background-position: 0 -29px;
}

label.css-label {
  background-image: url(http://csscheckbox.com/checkboxes/u/csscheckbox_5f7075ac8bfa3c2202ba6b5da7fb3227.png);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

JavaScript

$(function() {
  $('.css-checkbox').change(function() {
    var chckd = this.checked ? 'true' : 'false';
    var index = $(this).data('box-id');
    localStorage.setItem(index, chckd);
    location.reload();
  });
});

$(document).ready(function() {

  $('.css-checkbox').each(function() {
    var index = $(this).data('box-id');
    if (localStorage.getItem(index) == 'true') {
      $(this).prop('checked', true);
      SimplifyUI();
    } else {
      $(this).prop('checked', false);
    }
  });
});

function SimplifyUI() {
  $('body').css("background-color", "#607d8b");
}