JSFiddle - React, Tailwind, and code Playground

HTML

<div class="checkbox">
<input type="checkbox" value="1" name="test">
</div>

CSS

.checkbox {
    display: inline-block;
    margin: 0 4px 0 0;
    cursor: pointer;
    text-align: left;
    padding: 0px;
}
.checkbox input { display: none; }

.checkbox:before {
        background: url(http://www.digitss.com/jquery/custom-radio-checkbox/checkbox.gif) no-repeat;
        content: " ";
        float: left;
        height: 18px;
        width: 19px;
        margin: 0;
}

.checkbox.move:before {
    background-position:0 -50px;
}

JavaScript

$(".checkbox").on("click",function(){
    if($(this).hasClass("move")){
        $(this).removeClass("move");
    } else {
        $(this).addClass("move");
    }
});