JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <input type="checkbox" id="checkbox-1-1" class="regular-checkbox"/>
    <label for="checkbox-1-1"></label> 
 </div>

CSS

label {
    display: inline;
}

.regular-checkbox {
    display: none;
}

.regular-checkbox+label {
    background-color: #fafafa;
    border: 1px solid #cacece;
   padding: 9px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
}

.regular-checkbox+label:active, .regular-checkbox:checked+label:active {
    }

.regular-checkbox:checked+label {
    background-color: #e9ecee;
    border: 1px solid #adb8c0;
   color: #99a1a7;
}

.regular-checkbox:checked+label:after {
    font-size: 14px;
    position: absolute;
    top: 0px;
    left: 3px;
    color: #99a1a7;
}