JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="switch actOff">
  <span class="btn act" name="off"></span>
  <span class="btn" name="on"></span>
</div>

<div class="switch actOff">
  <span class="btn act" name="off"></span>
  <span class="btn" name="on"></span>
</div>

CSS

.switch { float: left; border-radius:20px; display: block; }
.switch > .btn { float: left; width:20px; height:20px; display:flex;}
.act {color: #FFF;}
.act:after {font-family: FontAwesome; content: "\f111";margin: auto;}
.actOff {background: #f3f3f4;}
.actOn {background: #53c1c7;}

JavaScript

$(document).on('click', '.btn', function(){
  
  if(!$(this).hasClass('act')){  
  	$(this).parent('div.switch').find('.btn').removeClass('act');
  	$(this).addClass('act');    
  }
  
  var actName = $(this).attr('name');
  
  if(actName == 'on'){
  	$(this).parent('div').addClass('actOn');
    $(this).parent('div').removeClass('actOff');
  }else{
  	$(this).parent('div').removeClass('actOn');
  	$(this).parent('div').addClass('actOff'); 
  }
  
});