JSFiddle - React, Tailwind, and code Playground

HTML

<label for="accept">I accept.</label>
<input id="accept" type="checkbox" value="1">

CSS

input { 
    position: absolute;
    left: -999em;
}

input:before { 
    content: "";
    height: 25px;
    width: 25px;
    margin-left: 999em;
    float: left;
    margin-top: -4px;
    background: #ddd;
    border: 1px solid #000;
}

input:checked:before {
    background: #0f0;
}

label { display: inline; overflow: hidden; padding-left: 35px; line-height: 27px; }