JSFiddle - React, Tailwind, and code Playground

by ciaoben

HTML

<div class="slider-frame">
    <div class="cent"></div>
    <span class="slider-button">OFF</span>
    
</div>

CSS

.slider-frame {


 position: relative;
  width:84px;
  
  height:28px;
}
.cent {
  z-index:-1;
  width: 84px;
  height: 20px;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
   -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  background-color:rgb(19, 57, 144);
}

.slider-button {
  display: block;
  width: 43px;
  height: 28px;
  line-height: 28px;
  background: #3B6CDD;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  color: white;
  font-family:sans-serif;
  font-size:14px;
  font-weight:bold;
  text-align: center;
  cursor: pointer;
  -webkit-box-shadow: inset 0px 0px 4px 0 rgba(0, 0, 0, 0.25);
  -moz-box-shadow: inset 0px 0px 4px 0 rgba(0, 0, 0, 0.25);
  box-shadow: inset 0px 0px 4px 0 rgba(0, 0, 0, 0.25);
    border-color:  rgb(19, 57, 144);
    border-width:2px;
}
.slider-button.on {
  margin-left: 40px;
  background: #3B6CDD;
}

JavaScript

$('.slider-button').toggle(function(){
    $(this).addClass('on').html('Si');
},function(){
    $(this).removeClass('on').html('No');
});