JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav navbar-nav navbar-right">
  <li class="active"><a href="#pageOne">Home</a></li>
  <li><a href="#pageTwo">About</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
</ul>

CSS

li {
  color: green
}

.active {
  color: red
}

Babel + JSX

let menuClick = document.getElementsByClassName("nav")[0];
menuClick.addEventListener('click', changeActive, false);

function changeActive(e) {
  let active = this.querySelector('li.active');
  active.classList.remove('active');
  e.target.parentNode.classList.add('active');
}