JSFiddle - React, Tailwind, and code Playground

HTML

<label class="checkbox"><input type="checkbox"/><span></span>I like cake</label>

CSS

label.checkbox input[type="checkbox"] {display:none;}
label.checkbox span {
    display:inline-block;
    border:2px solid #BBB;
    border-radius:10px;
    width:25px;
    height:25px;
    background:#F55;
    vertical-align:middle;
    margin:3px;
    text-align:center;
}
label.checkbox :checked + span {
    background:#5F5;
}
label.checkbox span:before {
    content:"N";
    vertical-align:middle;
}
label.checkbox :checked + span:before {
    content:"Y";
}