JSFiddle - React, Tailwind, and code Playground

by fretwiz

HTML

<legend>Checkbox example</legend>
<input id="checkbox" type="checkbox"/>
<label for="checkbox">Some awesome checkbox label</label>

CSS

label, input[type="checkbox"] {
   line-height: 2.1ex;
}

input[type="checkbox"]#checkbox {
    position: absolute;
    left: -999em;
}

input[type="checkbox"]#checkbox + label {
    position: relative;
    overflow: hidden;
    cursor: pointer;
} 

input[type="checkbox"]#checkbox + label::before {
   content: "";
   display: inline-block;
   vertical-align: -25%;
   height: 2ex;
   width: 2ex;
   background-color: white;
   border: 1px solid #c3c4c6;
   border-radius: 4px;
   margin-right: 0.5em;
}

input[type="checkbox"]#checkbox:checked + label::after {
   content: '';
   position: absolute;
   width: 1.2ex;
   height: 0.4ex;
   background: rgba(0, 0, 0, 0); 
   top: 0.5ex;
   left: 0.4ex;
   border: 3px solid #60cd18;
   border-top: none;
   border-right: none;
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   transform: rotate(-45deg); 
}