JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<input class="switch-checkbox" type="checkbox" id="checkbox1" />
<label class="switch-checkbox" for="checkbox1"><span></span>
</label>
<br />

<input class="switch-checkbox" type="checkbox" id="checkbox2" disabled />
<label class="switch-checkbox" for="checkbox2"><span></span>
</label>
<br />

<input class="switch-checkbox" type="checkbox" id="checkbox2" checked disabled />
<label class="switch-checkbox" for="checkbox2"><span></span>
</label>
<br />

<input class="switch-checkbox" type="checkbox" id="checkbox3" checked />
<label class="switch-checkbox" for="checkbox3"><span></span>
</label>
<br />

<input class="switch-checkbox" type="checkbox" id="checkbox4" checked />
<label class="switch-checkbox" for="checkbox4"><span></span>
</label>
<br />

SCSS

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
body {
    background: #ddd;
}
input[type="checkbox"].switch-checkbox {
    display: none !important;
    &:disabled {
        &, &:checked{
            & + label.switch-checkbox{
                background-color: #aaa;
                border-color: #aaa;
                &:before, &:after{
                    color: #f9f9f9;
                }
                span{
                    background-color: #f9f9f9;
                }
            }
        }
    }    
    &:checked {
        & + label.switch-checkbox {
            background-color: #4adb69;
            border-color: #4adb69;
            &:before{
                opacity: 0;
            }
            &:after{
                opacity: 1;
            }
            span {
                left: 0;
            }
        }
    }
}
label.switch-checkbox {
    background-color: #fff;
    display: inline-block;
    padding: 0;
    margin-bottom: 1em;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    border: 3px solid #e54b60;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 300ms, border-color 300ms;
    background-color: #e54b60;
    &:before, &:after {
        content:'\f00c';
        font-family:'FontAwesome';
        display: inline-block;
        font-size: 24px;
        padding: 6px 6px;
        text-align: center;
        width: 25px;
        transition: opacity 300ms, color 300ms;
        color: #fff;
        opacity: 0;
        z-index: 0;
    }
    &:before {
        content:'\f00d';
        opacity: 1;
    }
    &, * {
        box-sizing: border-box;
    }
    span {
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        bottom: 0;
        width: 50%;
        background-color: #fff;
        transition: left 300ms, background-color 300ms;
        z-index: 1;
        border-radius: 4px;
    }
}

JavaScript

/**
 * Styled checkboxes
 */