JSFiddle - React, Tailwind, and code Playground

by abude

HTML

<div class="button-switch-content">
  <input type="button" class="wb-switch" id="fs" value="1">
</div>

CSS

*, *:before, *:after {
   -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;
}
.button-switch-content input[type=button] {
  display: none;
}
.button-switch-content .button-wrap {
  width: 62px;
  margin: 40px auto 0;
  cursor: pointer;
}
.button-switch-content .button-bg {
  font-family:"Segoe UI", "Apple SD Gothic Neo", "Arial", "Helvetica", "sans-serif";
  font-weight:bold;
  font-size:12px;
  width: 62px;
  height: 22px;
  background-color: #d8d8d8;
  border-radius: 40px;
  padding: 3px;
  color:#fff;
  -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;
}
.button-switch-content .button-switch {
  position:relative;
  left:0px;
  width: 5px;
  height: 5px;
  border:solid 8px;
  background-color:#fff;
  border-radius: 36px;
  -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;
}
.button-switch-content .button-active .button-switch { left: 43px;top: -19px; }
.button-switch-content .button-in, 
.button-switch-content .button-out {
  position:absolute; 
  transition:all 0.2s ease;
  padding-top:15px;
  font-size:0.8em;
  text-transform:uppercase;
  font-weight:bold;
}
.button-switch-content .button-in { margin-left:76px; }
.button-switch-content .button-out { margin-left:18px; }
.button-switch-content .button-active .button-out {  }
.button-switch-content .button-active .button-in {  }
.button-switch-content .button-active .button-bg { background-color:#c9c946; }
.button-switch-content .button-active .button-bg:before { Content:"ON";padding-left:10px;margin-left:inherit; }
.button-switch-content .button-active .button-bg:after { Content: "OFF";position: relative;right: -36px }
.button-switch-content .button-inactive .button-switch {...

JavaScript

$('input.wb-switch').each(function(){
   var input_val = $(this).val();
    if(input_val == 1){
        $(this).after('<div class="button-wrap button-active"><div class="button-bg"></div><div class="button-switch"></div></div>');
    }
    else{
        $(this).after('<div class="button-wrap button-inactive"><div class="button-bg"></div><div class="button-switch"></div></div>');
    }
    
    
});
$('.button-wrap').on("click", function(){
   if($(this).hasClass('button-active') === true )$(this).removeClass('button-active').addClass('button-inactive');
    else $(this).removeClass('button-inactive').addClass('button-active');
  // $(this).toggleClass('button-active');
});