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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="onoff">
  <span class="onbtn act"></span>
  <span class="onbtn"></span>
</div>

<div class="onoff">
  <span class="onbtn act"></span>
  <span class="onbtn"></span>
</div>

CSS

.onoff {float:left;background:#f3f3f4;border-radius:20px;display:flex;margin:30px;}
.onoff>.onbtn {width:20px;height:20px;line-height:20px;}
.act {position: relative;}
.act:nth-child(1):after {content: "\f111";font-size: 20px;color:#FFF;font-family: FontAwesome;position: absolute;top:0;left:1px;}
.act:nth-child(2):after {content: "\f058";font-size: 20px;color:#53c1c7;font-family: FontAwesome;position: absolute;top:0;right:1px;}

JavaScript

$(".onbtn").click( function(){
  if ( !$(this).hasClass('act') ) {
    $(".onbtn").removeClass('act');
    $(this).addClass('act'); 
  }
});