JSFiddle - React, Tailwind, and code Playground

by Daniel Cheung

HTML

<div class="switch">
    <input type="checkbox"/>
    <span>
        <i></i>
    </span>
</div>

CSS

.switch {
    display: block;
    height: 30px;
    width: 80px;
    position: relative;
    background: rgba(0,0,0,.05);
    border: 1px solid rgba(0,0,0,.3);
    box-shadow: inset 0px 1px 3px rgba(0,0,0,.3);
    border-radius: 4px;
    overflow: hidden;
    font-family: sans-serif;
    font-size: 13px;
}
.switch input[type=checkbox] {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 2;
    opacity: 0;
    cursor: pointer;
}
.switch span {
    background: #2989d8; /* Old browsers */
    background: -moz-linear-gradient(left,  #2989d8 50%, #f9f9f9 50%); /* FF3.6+ */
    background: -webkit-linear-gradient(left,  #2989d8 50%,#f9f9f9 50%); /* Chrome10+,Safari5.1+ */
    background: -ms-linear-gradient(left,  #2989d8 50%,#f9f9f9 50%); /* IE10+ */
    background: linear-gradient(to right,  #2989d8 50%,#f9f9f9 50%); /* W3C */
    display: block;
    height: 100%;
    width: 132px;
    position: absolute;
    top: 0px;
    left: -50px;
    border-radius: 4px;
    box-shadow: inset 0px 1px 3px rgba(0,0,0,.2);
    overflow: hidden;
    -webkit-transition: background ease-in-out .25s, left ease-in-out .25s;
    -ms-transition: background ease-in-out .25s, left ease-in-out .25s;
    -moz-transition: background ease-in-out .25s, left ease-in-out .25s;
    transition: background ease-in-out .25s, left ease-in-out .25s;
    -webkit-transition-delay:1s, 0s;
    -ms-transition-delay:1s, 0s;
    -moz-transition-delay:1s, 0s;
    transition-delay:1s, 0s;
}
.switch span:after,
.switch span:before {
    width: 50px;
    position: absolute;
    top: 0px;
    text-transform: uppercase;
    display: block;
    height: 100%;
    text-align: center;
    line-height: 30px;
}
.switch span:before {
    content: "on";
    left: 0px;
    color: #fff;
    text-shadow: 0px 1px 1px rgba(0,0,0,.3);
}
.switch span:after {
    content: "off";
    right: 0px;
    color: #333;
}
.switch i {
   ...