JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
     
    </ul>
  </div>
</nav>

CSS

li.nav-item.active {
  font-weight: bold!important;
  font-size: 32px!important;
  border-bottom: 3px solid black;
}

JavaScript

$('li.nav-item').click(function(e) {

				$('li.nav-item').removeClass('active');

				$(this).addClass('active');
				e.preventDefault();
});