JSFiddle - React, Tailwind, and code Playground

by Michael Baas

HTML

<table class="table">
<tbody>
  <tr>
    <td>
     <label class="custom-control custom-checkbox">
       <input type="checkbox" class="custom-control-input">
       <span class="custom-control-indicator"></span>
       <span class="custom-control-description">inside</span>
     </label> 
    </td>
  </tr>
</tbody>
</table>
     <label class="custom-control custom-checkbox">
       <input type="checkbox" class="custom-control-input">
       <span class="custom-control-indicator"></span>
       <span class="custom-control-description">outside</span>
     </label> 
 <label class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description">Check this custom checkbox</span>
</label>

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

CSS

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    background-color: #caca4c;
}
.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    background-color: #caca4c;
}