JSFiddle - React, Tailwind, and code Playground

HTML

<label>
    <input type="checkbox">
    <span>One</span>
</label>
<label>
    <input type="checkbox">
    <span>Two</span>
</label>
<label>
    <input type="checkbox" disabled>
    <span>Three</span>
</label>

CSS

label {
    position:relative;   
    cursor:pointer;
}
label [type="checkbox"] {
    display:none;
}
[type="checkbox"] + span {
    display:inline-block;
    padding:1em;
}
:checked + span {
    background:#0f0;
    display:inline-block;    
}
[type="checkbox"][disabled] + span {
    background:#f00;  
}