JSFiddle - React, Tailwind, and code Playground

by Marc Locchi

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>


<div>
  <i class="fas fa-square"></i> SAMPLE UNCHECKED
  <br/>
  <i class="fas fa-check-square"></i> SAMPLE CHECKED
  <br/>
  <br/>
  <input type="checkbox" id="remember" name="remember" checked>
  <label for="remember"> Remember Me (WORKS)</label>
  <br/>
  <br/>
  <input name="access_chk[]" value="2" class="access_chk" type="checkbox" checked>
  <label for="access_chk[]"></label>
  <br/>
  <input name="access_chk[]" value="3" class="access_chk" type="checkbox" >
  <label for="access_chk[]"></label>
  <br/>
  <input name="access_chk[]" value="4" class="access_chk" type="checkbox" checked>
  <label for="access_chk[]"></label>
</div>

CSS

/**
 * Bothh
 */
 /* Hide Std Buttons */
input[type=checkbox],
input[type=radio] {
  display: none;
}

/* Hover */
input[type=checkbox] + label:hover,
input[type=radio] + label:hover {
  cursor: pointer;
}

/**
 * Checkboxes
 */
input[type=checkbox] + label:before {
  display: inline-block;
  letter-spacing: 5px;
  content: "\f0c8";
  font-family: 'Font Awesome 5 Free';
}


/* unchecked icon */

input[type=checkbox]:checked + label:before {
  content: "\f14a";
  font-family: 'Font Awesome 5 Free';
  letter-spacing: 5px;
}


/**
 * Radio buttons
 */
input[type=radio] + label:before {
  display: inline-block;
  letter-spacing: 5px;
  content: "\f111";
  font-family: 'Font Awesome 5 Free';
}


/* unchecked icon */
input[type=radio]:checked + label:before {
  content: "\f192";
  font-family: 'Font Awesome 5 Free';
  letter-spacing: 5px;
}