JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<div class="on-off-btn">
    <button class="process">Ongoing</button>
    <button class="process">Completed</button>
</div>

CSS

.on-off-btn {width: 200px; margin: 10px 0; border-radius: 30px; overflow: hidden;}
.on-off-btn .process { float: left; width: 50%; color: #999999; background: #e2e2e2; text-align: center; line-height: 30px; margin: 0!important; padding: 0!important;border: 0!important; cursor: pointer; outline: none;}
.active {color: #fff!important; background:#116dc9!important;}

JavaScript

$(document).ready(function(){
      $(".process").click(function() {
      // remove classes from all
      $(".process").removeClass("active");
      // add class to the one we clicked
      $(this).addClass("active");
   });
});