JSFiddle - React, Tailwind, and code Playground

by Poyu Chen

HTML

<div id="container" class="off-status">
  <div id="handle" class="content"></div>
  <div id="off" class="content">off</div>
  <div id="on" class="content">on</div>    
</div>

CSS

div#container{
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  border:1px solid #000;
  margin:20px;
  width:70px;
  height:30px;
  position:relative;
}
div#container:after{
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

div.content{
  position:absolute;
  top:7px;
  left:10px;
  width:15px;
  height:15px;
}

div#handle{
  top:0px;
  left:0px;
  border:1px solid #f00;
  width:28px;
  height:28px;
  border-radius: 28px;
  -webkit-border-radius:28px;
  -moz-border-radius:28px;
  background:#f00;
}

div#handle:hover{
  cursor:pointer;
  background:#a00;
}

div#handle:active{
  background:#00f;
  border:1px solid #00f;
}
/*off-status*/
div.off-status div#off{
 left:40px;
}
div.off-status div#on{
  display:none;
}
 /*on-status*/
div.on-status div#off{
 display:none;
}

div.on-status div#handle{
 left:40px;
 background:#00f;
 border:1px solid #00f;
}

JavaScript

$(function(){
  var box=$('#container');
  $('#handle').click(function(){
      if(box.attr('class')==='on-status'){
        box.removeClass('on-status');
        box.addClass('off-status');
       }else{
        box.removeClass('off-status');
        box.addClass('on-status');
       }
   });
});