JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="my-checkbox">
<label for="my-checkbox">Checkbox label text 
   <span class="checkbox"></span>
</label>

CSS

input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] + label .checkbox {
  display: inline-block;
  width: 22px;
  height: 19px;
  vertical-align: middle;
  background: url('ui-sprite.png') left -90px no-repeat;
  cursor: pointer;
}
input[type="checkbox"]:checked + label .checkbox {
  background: url('ui-sprite.png') -30px -90px no-repeat;
}