JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
        <ul>
          <li class="activeItem">
            <a href="#">BRANDING</a>
          </li>
          <li>
            <a href="#">WEB</a>
          </li>
          <li>
            <a href="#">PRINT</a>
          </li>
        </ul>
      </nav>

CSS

nav ul
{
  list-style: none;
  margin: 17px auto;
  float: none;
  display: table;
}
ul li {
  height: 34px;
  float: left;
  width: auto;
  text-align: center;
  padding: 6px 21px;
  margin: 0px 6px;
}
ul li a 
{
  color: #404040;
  font-size: 13px;
  text-align: center;
  line-height: 16px;
  font-family: raleway, sans-serif;
  font-weight: 300;
  text-decoration: none;
}
ul li.activeItem
{
    border: 1px solid #eab000;
}
ul li.activeItem a
{
    color:#eab000;
}

JavaScript

$('ul li').on('click',function(e){
      e.preventDefault();
	  $(this).addClass("activeItem").siblings().removeClass("activeItem");
  });