JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="content">
    <input type="checkbox" class="check" id="one" name="check_one" checked/>
    <label for="one">
        <div id="thumb"></div>
    </label>
    <input type="checkbox" class="check" id="two" name="check_two" />
    <label for="two">
        <div id="thumb"></div>
    </label>
</div>

CSS

/**/

/**/
 @off : #fc868a;
 @on : #a6f779;
 body {
    background: #fafafa;
}
* {
    box-sizing:border-box;
}
::selection {
    background:transparent;
}
P {
    text-align: center;
}
#content {
    width: 100px;
    margin: 180px auto;
}
label:before {
    content:'';
    display: block;
    width: 70px;
    height: 30px;
    display: block;
    border-radius: 5px;
    -webkit-box-shadow: inset 0 4px 0px rgba(0, 0, 0, .05), 0 0px 1px rgba(255, 255, 255, .8), 0 1px 2px #fff;
    box-shadow: inset 0 4px 0px rgba(0, 0, 0, .05), 0 0px 1px rgba(255, 255, 255, .8), 0 1px 2px #fff;
    position: relative;
    z-index: -1;
    padding: 1px;
}
label:before {
    background: @on;
}
#one:checked ~ label[for=one]:before {
    background: @off;
}
#two:checked ~ label[for=two]:before {
    background: @off;
}
/* 1 -Hide the inputs */
 input[type=checkbox] {
    display: none;
}
/* 2 -Prepare labels */
 #thumb {
    content:'';
    height: 24px;
    display: block;
    float: left;
    width: 30px;
    padding: 0px;
    margin: -30px 2px;
    border-radius: 4px;
    background: #fff;
    -webkit-box-shadow: 0 4px #eff1eb, 0 5px 15px rgba(0, 0, 0, .2);
    box-shadow: 0 4px #eff1eb, 0 5px 15px rgba(0, 0, 0, .2);
    position: absolute;
    z-index: 1;
}
/* 3 -Prepare the fonts ? */
 label {
    display: block;
    margin: 8px 0;
}
/* Now, make it move */
 #one:checked ~ label[for=one] #thumb {
    margin: -30px 40px;
}
#two:checked ~ label[for=two] #thumb {
    margin: -30px 40px;
}
label:before, #thumb, #one:checked ~ label[for=one]:before, #two:checked ~ label[for=two]:before {
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s;
}