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;
}

JavaScript

$('ul li').first().css({
    'border':'1px solid #eab000',
  }).find('a').css({
    'color':'#eab000'
  });

  $('ul li').on('click',function(e){
      e.preventDefault();

      $(this).css({
        'border':'1px solid #eab000',
      }).find('a').css({
          'color' : '#eab000'
      }).parent().siblings('li').css({
        'border':'none',
      }).find('a').css({
        'color':'#404040'
      });

  });