JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.js"></script>
<ul>
  <li>
    <a class="menu" data-toggle="tooltip" data-placement="bottom" title="home">
      <i class="fa fa-bars fa-2x" aria-hidden="true"></i>
    </a>
  </li>
  <li>
    <a class="search"><i class="fa fa-search fa-2x" aria-hidden="true"></i></a>
  </li>
</ul>

CSS

.active {
  color: blue;
  background-color: red;
}

.active .fa {
  color: yellow;
}

JavaScript

$(document).ready(function() {
  $('li a').on('click', function() {
    $('li').removeClass('active');
    $('li').addClass('active');
  });
});