JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<label for="isVac" class="switch">
 <span class="switchInner"></span>
</label>
   <input id="isVac" type="checkbox"/>

CSS

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

.switch {
    display:inline-block;
    height:30px;
    width:60px;
    background:white;
    border:1px solid black;
    border-radius:30px;
       -webkit-transition: all ease-out 0.5s;
    -moz-transition: all ease-out 0.5s;
    -o-transition: all ease-out 0.5s;
    transition: all ease-out 0.5s;
    
}
.switchInner {
    width:30px;
    height:30px;
    border-radius:15px;
    border:1px solid black;
    display:inline-block;
    background: white;
    position:relative;
    top:-1px;
    left:-1px;
}
.activeSwitch .switchInner {
}
.activeSwitch.switch {
    box-shadow: inset 0 0 0 15px #26A65B;
}

JavaScript

$('.switch').click(function(){
    if($(this).hasClass('activeSwitch')){
        $(this).removeClass('activeSwitch');
    $(this).find('span').animate({left:"-1px"},300);
    } else {
        $(this).addClass('activeSwitch');
           $(this).find('span').animate({left:"31px"},300);
    }
});