JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<div class='sliderOuter' onmousedown="$(this).toggleClass('on');">
    <div class='sliderInner'>
        <span class='sliderOff'>off</span>
        <span class='sliderMiddle'></span>
        <span class='sliderOn'>on</span>
    </div>
</div>

CSS

html{
    height:100%;
    background-image:-webkit-radial-gradient(50% 50%, farthest-corner, #f0f0f0, #ddd);
}

body{
    position:absolute;
    height:20px;
    top:50%;
    margin-top:-10px;
    text-align:center;
    width:100%;
}

.sliderOuter{
    position:relative;
    display:inline-block;
    width:50px;
    height:20px;
    border-radius:10px;
    background:#aaa;
    background-image:-webkit-linear-gradient(-90deg, #c0c0c0, #ddd);
    box-shadow:
        inset 0 1px 0 rgba(0,0,0,.1),
        0 1px 0 #fff;
        ;
    font-family:serif;
    overflow:hidden;
    cursor:pointer;
}

.sliderOuter.on{
    
}

.sliderInner{
    position:absolute;
    top:0;
    left:0;
    width:200px;
    text-align:left;
    font-size:0;
    -webkit-transition:left ease-in-out .2s;
}

.sliderOuter.on .sliderInner{
    left:-30px;
}

.sliderOff,
.sliderOn{
    position:relative;
    top:-2.5px;
    left:1px;
    display:inline-block;
    height:18px;
    overflow:hidden;
    width:29px;
    text-align:center;
    margin:1px;
    font-size:15px;
    color:#555;
    text-shadow:0 1px 0 #fff;
}

.sliderOn{
    top:-4px;
    left:-3px;
    color:#007fcc;
}

.sliderMiddle{
    position:relative;
    top:1px;
    margin:1px;
    display:inline-block;
    width:16px;
    height:16px;
    background-color:#eee;
    background-image:-webkit-linear-gradient(-90deg, #fafafa, #eee);
    border-radius:9px;
    box-shadow:
        inset 0 1px 0 #fff,
        0 1px 1px rgba(0,0,0,.4)
        ;
}

.sliderOuter.on .sliderMiddle{
    
}