JSFiddle - React, Tailwind, and code Playground

HTML

<section id="nav">
  <nav>
    <ul class="nav">
      <li class="nav-selected nav-path-selected">
        <a class="nav-selected nav-path-selected" href="/">Home</a>
      </li>
      <li>
        <a href="/about/">About Us</a>
      </li>
      <li>
        <a href="/opportunities/">Opportunities</a>
      </li>
      <li>
        <a href="/inspiration/">Inspiration</a>
      </li>
      <li>
        <a href="/members/">Members</a>
      </li>
    </ul>
  </nav>
</section>

CSS

body {
    background:#000;   
}
section#nav {
    height: 45px;
    margin-bottom:5px;
    text-align:center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
nav {
    max-width: 700px;
    height: 45px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    margin: 0 auto;
}

nav ul {
    padding:12px 15px;
    margin:0 auto;
    text-align:center;
    overflow:hidden;
}

nav ul li {
    font-size:14px; 
    display:inline-block;
}

nav ul li a {
    color: #FFFFFF;
    margin:0 10px;  
    transition: all 0.5s ease-out !important; 
    -moz-transition: all 0.5s ease-out !important;
    -ms-transition: all 0.5s ease-out !important; 
    -webkit-transition: all 0.5s ease-out !important; 
    -o-transition: all 0.5s ease-out !important;
}

nav ul li a.nav-path-selected {
    border-bottom:1px #ffffff solid;
}

nav ul li a.nav-path-selected {
    border-bottom:1px #ffffff solid;
    color:#FFFFFF !important;
}

nav ul li a:hover {
    color:#CCCCCC !important;
    transition: all 0.5s ease-out !important; 
    -moz-transition: all 0.5s ease-out !important;
    -ms-transition: all 0.5s ease-out !important; 
    -webkit-transition: all 0.5s ease-out !important; 
    -o-transition: all 0.5s ease-out !important;
}