JSFiddle - React, Tailwind, and code Playground

HTML

<div class="elements">
    <div class="switch">
        <div class="cont">
            <span data-val="0" data-extra="Website available">Online</span>
            <div class="toggle"></div>
            <span data-val="1" data-extra="Website unavailable">Offline</span>
        </div>
    </div>
    <span class="extra"></span>
    <input type="hidden" value="2" />
</div>

CSS

.elements .switch {
    box-shadow:0 1px 1px rgba(0,0,0,0.4); display:inline-block; border-radius:15px; height:29px; position:relative; overflow:hidden;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
.elements .switch .cont {
    width:200%; position:relative;
}
.elements .switch span {
    padding:0 30px 0 15px; box-shadow:inset 0 10px 1px rgba(255,255,255,0.2); background:-webkit-linear-gradient(top, #FFF, #EEE); line-height:31px; color:#555; text-shadow:0 1px #FFF; float:left;
}
.elements .switch span:last-child {
    background:rgba(0,133,178,0.9); box-shadow:inset 1px 1px 2px #004C66, inset -1px -1px 2px #004C66; color:#FFF; text-shadow:0 1px #222;  padding:0 15px 0 30px;
}
.elements .switch .toggle {
    height:30px; width:30px; border-radius:15px; background:#CCC; float:left; margin:0 -15px 0 -15px; cursor:pointer; position:relative; box-shadow:0 0 1px #666;
}

JavaScript

$(document).ready(function(){
    $('.elements .switch').each(function(){
        $(this).width($(this).find('span:first').outerWidth() + 15);
    });
    $('.elements .switch').click(function(){
        if($(this).hasClass('active')){
            $(this).removeClass('active').find('.cont').animate({left:0},400);
        }
        else {
        var current = ($(this).find('span:first').outerWidth() - 15) * -1;
            $(this).addClass('active').find('.cont').animate({left:current},400);
        }
    });
    
});