JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav nav-tabs" role="tablist">
      <li><a id="tabAll" href="#">All</a></li>
      <li class="active">
          <a href="#on" role="tab" data-toggle="tab">
            Ongoing
          </a>
      </li>
       <li>
          <a href="#com" role="tab" data-toggle="tab">
              Completed
          </a>
      </li>
       <li>
          <a href="#ren" role="tab" data-toggle="tab">
               Renovated
          </a>
      </li>
</ul>

<div class="tab-content">
      <div class="tab-pane fade active in" id="on">
          <h2>Ongoing</h2>
         
      </div>
     <div class="tab-pane fade" id="com">
          <h2>Completed</h2>
         
      </div>
     <div class="tab-pane fade" id="ren">
          <h2>Renovated</h2>
         
      </div>
</div>

JavaScript

$('#tabAll').on('click',function(){
  $('#tabAll').parent().addClass('active');  
    $('.tab-pane').addClass('active in');  
  $('[data-toggle="tab"]').parent().removeClass('active');
});