JSFiddle - React, Tailwind, and code Playground

by abude

HTML

<div class="flipswitch">
    <input type="text" name="flipswitch" class="flipswitch-cb" id="fs" value="0">
    <label class="flipswitch-label" for="fs">
        <div class="flipswitch-inner"></div>
        <div class="flipswitch-switch"></div>
    </label>
</div>

CSS

body {margin:40px 0 0 40px;}

.flipswitch {
  position: relative;
  width: 86px;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select: none;
}
.flipswitch input[type=text] {
  display: none;
}
.flipswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #999999;
  border-radius: 50px;
}
.flipswitch-inner {
  width: 200%;
  margin-left: -100%;
  -webkit-transition: margin 0.3s ease-in 0s;
  -moz-transition: margin 0.3s ease-in 0s;
  -ms-transition: margin 0.3s ease-in 0s;
  -o-transition: margin 0.3s ease-in 0s;
  transition: margin 0.3s ease-in 0s;
}
.flipswitch-inner:before, .flipswitch-inner:after {
  float: left;
  width: 50%;
  height: 24px;
  padding: 0;
  line-height: 24px;
  font-size: 18px;
  color: white;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.flipswitch-inner:before {
  content: "ON";
  padding-left: 12px;
  background-color: #256799;
  color: #FFFFFF;
}
.flipswitch-inner:after {
  content: "OFF";
  padding-right: 12px;
  background-color: #EBEBEB;
  color: #888888;
  text-align: right;
}
.flipswitch-switch {
  width: 31px;
  margin: -3.5px;
  background: #FFFFFF;
  border: 2px solid #999999;
  border-radius: 50px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 59px;
  -webkit-transition: all 0.3s ease-in 0s;
  -moz-transition: all 0.3s ease-in 0s;
  -ms-transition: all 0.3s ease-in 0s;
  -o-transition: all 0.3s ease-in 0s;
  transition: all 0.3s ease-in 0s;
}
/* .flipswitch-cb[value="1"] + .flipswitch-label .flipswitch-inner {
  margin-left: 0px;
}
.flipswitch-cb[value="1"] + .flipswitch-label .flipswitch-switch {
  right: 0;
} */

JavaScript

$('.flipswitch').on('click','.flipswitch-label',function(){      
    if($(this).parents('.flipswitch').find('input.flipswitch-cb').val() == 1){
        $(this).parents('.flipswitch').find('input.flipswitch-cb').val(0);
        $('.flipswitch-cb + .flipswitch-label .flipswitch-inner').css('margin-left','-100%');
        $('.flipswitch-cb + .flipswitch-label .flipswitch-switch').css('right','59px');       
    }
    else{
        $(this).parents('.flipswitch').find('input.flipswitch-cb').val(1);
        $('.flipswitch-cb + .flipswitch-label .flipswitch-inner').css('margin-left','0px');
        $('.flipswitch-cb + .flipswitch-label .flipswitch-switch').css('right','0');
    }       
});