JSFiddle - React, Tailwind, and code Playground

by Mehmet Alp

HTML

<span class="switchLabel grayLabel">ON</span>
<button id="On" class="enabledDisabledBtn" value="On"><p class="disabledRight buttonDeger"></p></button>
<span class="switchLabel blueLabel">OFF</span>    
<input type="checkbox">

CSS

*{margin:0px;padding:0px;}
.enabledDisabledBtn{cursor:pointer;border:1px solid #AAAAAA; width:100px;height:40px;background:none repeat scroll 0 0 #CCCCCC;border-radius:4px;}
.buttonDeger{ border:1px solid #AAAAAA;padding:0px;margin:0px;border-radius:4px;height:40px;background:none repeat scroll 0 0 #FAFAFA;width:50px;}
.disabledRight{float:right;}
.enabledLeft{float:left;}
.switchLabel{font-size:50px;}
.grayLabel{color:#ADADAD;}
.blueLabel{color:#0088CC;}

JavaScript

$("#On").toggle(function(){
    $("input:checkbox").attr('checked', true);
    $(this).find("p").removeClass("disabledRight").addClass("enabledLeft");
    $(this).prev().removeClass("grayLabel").addClass("blueLabel");
    $(this).next().removeClass("blueLabel").addClass("grayLabel");
}, function(){
    $("input:checkbox").attr('checked', false);
    $(this).find("p").removeClass("enabledLeft").addClass("disabledRight");
     $(this).prev().removeClass("blueLabel").addClass("grayLabel");
     $(this).next().removeClass("grayLabel").addClass("blueLabel");
});