JSFiddle - React, Tailwind, and code Playground

by Jernej Slejko

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="checkbox checkbox-fa">
  <input type="checkbox" id="box1">
  <label for="box1">Check me out</label>
</div>
<div class="checkbox checkbox-big">
  <input type="checkbox" id="box2">
  <label for="box2">Check me out</label>
</div>

SCSS

.checkbox-fa {
  input[type=checkbox] { 
    display:none;
    & + label:before {
      font-family: FontAwesome;
      display: inline-block;
      content: "\f096";  /* unchecked icon */
      letter-spacing: 10px;
    }
    &:checked {
      & + label:before {
        content: "\f046";  /* checked icon */
        letter-spacing: 8px;
      }
    }
  }
}
.checkbox-big {
  [type="checkbox"]:not(:checked),
  [type="checkbox"]:checked {
    display: none;
    & + label {
      position: relative;
      padding-left: 50px;
      line-height: 40px;
      cursor: pointer;
      &:before {
        content: '';
        position: absolute;
        left:0;
        top: 2px;
        width: 40px;
        height: 40px;
        background: #ddd;
      }
      &:after {
        content: '✔';
        position: absolute;
        top: 3px;
        left: 10px;
        font-size: 25px;
        line-height: 40px;
        color: #09ad7e;
        transition: all .2s;
      }
      &:hover:before {
        box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4) inset;
      }
    }
  }
  

  /* checked mark aspect changes */
  [type="checkbox"]:not(:checked) + label:after {
    opacity: 0;
    transform: scale(0);
  }
  [type="checkbox"]:checked + label:after {
    opacity: 1;
    transform: scale(1);
  }
  
  /* disabled checkbox */
  [type="checkbox"]:disabled:not(:checked) + label:before,
  [type="checkbox"]:disabled:checked + label:before {
    box-shadow: none;
    border-color: #bbb;
    background-color: #ddd;
  }
  [type="checkbox"]:disabled:checked + label:after {
    color: #999;
  }
  [type="checkbox"]:disabled + label {
    color: #aaa;
  }
  /* accessibility */
  [type="checkbox"]:checked:focus + label:before,
  [type="checkbox"]:not(:checked):focus + label:before {
    border: 1px dotted blue;
  }

}