JSFiddle - React, Tailwind, and code Playground

by binoy vm

HTML

<div class="text-center row">
 <ul  class="col-md-12 secondNav">
  <li id="navItem" class="navbar-brand nav-item" style="margin-right: 9%">
    <a href="#" ><strong>INICIO</strong> </a>
  </li>
  <li  class="navbar-brand nav-item" >
    <a href="#"><strong>COMPARAR</strong></a>
  </li>
</ul>
</div>

CSS

.secondNav .nav-item.active {
  background-color: red;
}

JavaScript

$(document).ready(function(){
  $('.nav-item').click(function(e){
  		$('.secondNav .nav-item').removeClass('active')
  		$(this).addClass('active')
   });
});