JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<input name="isVacuum" id="field_isVacuum" type="checkbox">
    <label for="field_isVacuum" class="switch cf">
        <div>No</div>
        <div>Yes</div>
        <span> </span>
    </label>

SCSS

.switch {
    width:140px;
    /* background: #e3e3e3; */
    display:block;
    position:relative;
    border:1px solid #888;
    border-radius:5px;
    box-shadow:inset 0 0 5px #999;
    div {
        width:50%;
        float:left;
        z-index:4;
        position:relative;
        text-align: center;
    } 
    span {
    
    width:50%;
        border-radius:5px;
    position:absolute;
        height:100%;
    top:0;
    left:0;
        display:block;
        content:"";
    background:#313131;
    z-index:1
            ;
        box-shadow:inset  1px 1px 0px #fff, inset -1px -1px 0 #000;
        background: rgb(149,149,149); /* Old browsers */
background: -moz-linear-gradient(top, rgba(149,149,149,1) 0%, rgba(13,13,13,1) 46%, rgba(1,1,1,1) 50%, rgba(10,10,10,1) 53%, rgba(78,78,78,1) 76%, rgba(56,56,56,1) 87%, rgba(27,27,27,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(149,149,149,1)), color-stop(46%,rgba(13,13,13,1)), color-stop(50%,rgba(1,1,1,1)), color-stop(53%,rgba(10,10,10,1)), color-stop(76%,rgba(78,78,78,1)), color-stop(87%,rgba(56,56,56,1)), color-stop(100%,rgba(27,27,27,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /*...

JavaScript

$('#field_isVacuum').click(function(){
    alert($(this).prop('checked'));
});
$('.switch').find('div:nth-child(1)').css('color',"#fff");
$('.switch ').click(function(){
    if ($(this).find('span').position().left === 0){
        //alert('at zero');
        $(this).find('span').stop(true, true).animate({
            left:"50%"
        },500);
        
        $(this).find('div:nth-child(1)').css('color',"#999");
        $(this).find('div:nth-child(2)').css('color',"#fff");
        
        
    } else if ($(this).find('span').position().left === 70){
        $(this).find('span').stop(true, true).animate({
            left:"0"
        },500);
        $(this).find('div:nth-child(1)').css('color',"#fff");
        $(this).find('div:nth-child(2)').css('color',"#999");
    }
    
})