JSFiddle - React, Tailwind, and code Playground

HTML

<input id="mycheckbox" type="checkbox">
<label id="mylabel" for="mycheckbox"></label>

CSS

#mycheckbox {
    display: none;
}
#mylabel {
    float: left;
    margin-top: 11px;
    background-color: #fff;
    border: 1px solid #000;
    display: block;
    height: 12px;
    width: 12px;
    margin-right: 10px;
    -webkit-border-top-right-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-topright: 20px;
    -moz-border-radius-bottomright: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    background-position: left center;
}
#mylabel.checked {
    background-color: #808080;
}

JavaScript

$(document).ready(function () {
    $("#mycheckbox").change(function () {
       if ($("#mycheckbox").is(":checked")) {
        $("#mylabel").addClass("checked", "checked");
    } else {
        $("#mylabel").removeClass("checked");
    }})
    });