JSFiddle - React, Tailwind, and code Playground

by Manna

HTML

<div id="toggle_container">
    <em></em>
    <em class="stat">STATS</em>
    <div class="controller active"></div>
</div>
<div id="main_container">This is a try</div>

CSS

#toggle_container {
      background: #0581ab;
      width: 80px;
      height: 20px;
      position: relative;
      float: left;
      border-radius: 10px;
      margin: 5px 10px;
      box-shadow: inset 0px 0px 2px 1px #FAFAFA;
}
#toggle_container div.controller.active {
        background: #ffffff;
        height: 20px;
        width: 22px;
        position: relative;
        float: left;
        border-radius: 10px;
        border: 1px solid #CFCFCF;
        top: -1px;
        box-shadow: inset 0px 0px 1px 1px #F8F8F8;
}
 #toggle_container div.controller.inactive {
        float: right;
}
  #toggle_container em.stat {
        display: none;
        font-size: 9px;
        padding: 3px 2px 3px 10px;
        color: #ffffff;
        font-style: italic;
}
 #toggle_container em.stat.true {
        color: #ffffff;
        font-style: italic;
}

#main_container {
    background: #dddddd;
    position: absolute;
    top: 30px;
    display: none;
}

JavaScript

$('.controller').click(function(){
   $('em').toggle('slow');
   $('.controller').addClass('inactive');
   $('.stat').addClass('true');
   $('#main_container').css('display', 'block')
});