JSFiddle - React, Tailwind, and code Playground

HTML

<input id="inp" type="checkbox" />
<div id="cb" class="inp_checkbox"></div>
<span>Test</span>

CSS

input[type=checkbox] {
    display:none;
}
.inp_checkbox {
    background:#fff;
    border:1px solid #919191;
    border-radius:1px;
    transition:all 0.3s ease 0s;
    box-shadow:0 1px 3px rgba(0, 0, 0, 0.1);
}
.inp_checkbox.focus {
    border-color:#007fff !important;
    box-shadow:0 0 0 2px #007fff, 0 0 4px rgba(255, 255, 255, 0.6);
}
.inp_checkbox {
    float: left;
}
.inp_checkbox > div {
    display:flex;
    cursor:pointer;
    padding:1px;
    height:18px;
    width:18px;
}
.inp_checkbox > div > div {
    background:#424242;
    height:0;
    width:0;
    margin:auto;
    border-radius:1px;
}
span{
    float: left;
    margin-left: 10px;
}

JavaScript

function init_checkbox(input_id, check_id) {
    var input = $('#' + input_id),
        checkbox = $('#' + check_id).html('<div></div>'),
        options = {
            duration: 200
        };

    checkbox.click(function () {
        input.prop('checked', !input.prop('checked')).focus().change();
    }), inner = $('<div></div>').appendTo(checkbox.find('div:first'));

    input.focus(function () {
        checkbox.addClass('focus');
    })
        .blur(function () {
        checkbox.removeClass('focus');
    })
        .change(function () {
        if (input.prop('checked')) {
            inner.animate({
                height: 10,
                width: 10
            }, options);
        } else {
            inner.animate({
                height: 0,
                width: 0
            }, options);
        }
    });
}

init_checkbox('inp', 'cb');