JSFiddle - React, Tailwind, and code Playground

by Tyriar

HTML

<input type="checkbox" id="check" />
<label for="check"></label>
<br />
<input type="checkbox" id="check2" />
<label for="check2"></label>

CSS

input[type="checkbox"] {
    position:absolute;
    left:-9999px;
    top:-9999px;
}

input[type="checkbox"] + label {
    visibility:visible;
    content:"W";
    display:block;
    background:#0ab9bf;
    width:20px;
    line-height:20px;
    text-align:center;
    height:20px;
    overflow:hidden;
}

input[type="checkbox"]:checked + label {
    background:#F00;
}