JSFiddle - React, Tailwind, and code Playground

by Manna

HTML

<div id="toggle_container">
    <em></em>
    <em class="stat"></em>
    <div class="controller active"></div>
</div>

CSS

#toggle_container {
      background: rgb(153, 162, 165);
      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 {
        background: #ffffff;
        height: 20px;
        width: 22px;
        position: relative;
        float: right;
        border-radius: 10px;
        border: 1px solid #CFCFCF;
        top: -1px;
        box-shadow: inset 0px 0px 1px 1px #F8F8F8;
}
  #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;
}

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

JavaScript

$('.controller').click(function(){
	if($('.controller').hasClass('active')){			
        $('#toggle_container').css('background', '#0581ab');
        $('em').css('display', 'inline');
		$('.controller').removeClass('active');
		$('.controller').addClass('inactive');
	}else{
	    $('#toggle_container').css('background', 'rgb(153, 162, 165)');
		$('em').css('display', 'none');
		$('.controller').removeClass('inactive');
		$('.controller').addClass('active');
		}
});