JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#laser">LASER</a></li>
        </ul>
      </div>
    </div><!--/.container -->
  </nav>

CSS

ul li {
    list-style: none;
    text-transform: uppercase;
    
}
ul li a {
    float: left;
    padding: 15px;
    background: #444;
    color: #fff;
    text-decoration: none;
    border-top: 5px solid #ddd;
}
ul li a:hover, ul li.active a {
    background: #222;
    color: #cc0233;
    border-top: 5px solid #cc0233;
}