JSFiddle - React, Tailwind, and code Playground

by Ариан Шапиро

HTML

<p>Технические подробности</p>    
    <label for="ch">
<input type="checkbox" id="ch">       
<div id="switcher">
    <div id="rail">
        <div id="state1">Выкл.</div>
        <div id="slider"></div>
        <div id="state2">Вкл.</div>
    </div>
</div>
</label>

CSS

#switcher {
    width:90px;
    height:24px;  

    position:relative;
    overflow:hidden;
    white-space:nowrap;            
    display: inline-block;

    border-radius:100px;                
    padding:2px;
    box-shadow: inset 0px 3px 10px 0px rgba(0, 0, 0, 0.4), 0px 3px 10px 0px rgba(255, 255, 255, 0.4);
    font-family:sans-serif;
    font-size:14px;
    -webkit-transition: all 0.3s ease-in-out;
    background-size: 28px 28px;
    
}




#rail {
     width:106px;
    height:35px;
        position:absolute;
        top:2px;
        left:18px;
        -webkit-transition: all 0.3s ease-in-out;
        cursor: pointer;    margin:0px;
    padding:0px;
    border:1px;
}


#state1 {
    width:40px;
        display: inline-block;
        height:24px;
        position:relative;
        top:-7px;
        left:-4px;        
        padding-left: 5px; 
        color:hsl(30,20%,90%);;            
    
}

#state2 {
        display: inline-block;
        height:24px;
        position:relative;
        top:-7px;
        left:13px;                
        color:hsl(190,20%,90%);    

}

#slider {
        display: inline-block;
        height:24px;
        width:24px;
        position:relative;
        border-radius:100px;  

background-color:#ccc;
        box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.2), inset 0px 1px 1px 1px rgba(255, 255, 255, 0.7);
}

#ch{
        display:none;
}

#ch:checked + #switcher #rail{
        left:-46px;
}


#ch:not(:checked) + #switcher {
        background-color: hsl(30,20%,50%);
}

#ch:checked + #switcher {
        background-color: hsl(190,20%,50%);
}


#ch:checked + #switcher:hover {
background-image: -webkit-gradient(linear, left top, right bottom, 
        color-stop(0%,rgba(255,255,255,0)), 
        color-stop(25%,rgba(255,255,255,0)), 
        color-stop(25%,rgba(255,255,255,.1)), 
        color-stop(50%,rgba(255,255,255,.1)), 
        color-stop(50%,rgba(255,255,255,0)), 
        color-stop(75%,rgba(255,255,255,0)), 
       ...