JSFiddle - React, Tailwind, and code Playground

by Kenneth Luplau-Brøgger

HTML

<div class="checkbox">
    <label>
        <span class="tick"></span>
        <input type="checkbox" id="setting-1" name="setting-1" checked="checked" />
    </label>
</div>

CSS

.checkbox {
    position: relative;
    overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: inline-block;
    width: 4em;
    height: 2em;
    border-radius: 1em;
    background: #dae4e4;
    -webkit-transition: background-color 100ms;
    -moz-transition: background-color 100ms;
    -o-transition: background-color 100ms;
    -ms-transition: background-color 100ms;
    transition: background-color 100ms;
}

.checkbox .tick {
    height: 1.8em;
    margin: 0.1em;
    border-radius: 1em;
    background: #fff;
    display: block;
    width: 1.8em;
    -webkit-transition: margin 100ms;
    -moz-transition: margin 100ms;
    -o-transition: margin 100ms;
    -ms-transition: margin 100ms;
    transition: margin 100ms;
}

.checkbox.checked {
    background: #00cf8d;
}

.checkbox.checked .tick {
    margin-left: 2.1em;
}

.checkbox label {
    display: block;
    height: 2em;
}

.checkbox input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
}

JavaScript

var checkbox = function(checkbox) {
    var $checkbox = $(checkbox);
    var $tick = $checkbox.find(".tick");
    
    var setProp = function(check) {
        $checkbox.closest(".checkbox").toggleClass("checked", check);
    }
    
    $checkbox.on("change", function() {
        setProp($checkbox.is(":checked"));
    });
    
    $
    
    setProp($checkbox.is(":checked"));
}

$(function() {
    $(".checkbox input").each(function() {
        $(this).data("checkbox", new checkbox(this));
    });
});