JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="site-navigation" class="main-navigation" role="navigation">
        <ul>
            <li class="selected"><a href="#home">Home</a></li>
            <li><a href="#about">About us</a></li>
            <li><a href="#team">Team</a></li>
            <li><a href="#vehicle">Vehicle</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#sponsors">Sponsors</a></li>
            <li><a href="#contact">Contact Us</a></li>
        </ul>
    </nav><!-- #site-navigation -->

CSS

#site-navigation li.selected a {
  color: #DEAF5A;
}
#site-navigation {
  min-height: 50px;
  width: 100%;
  background: #853636;
  border-top: 1px solid #e1e1e1;
}

.main-navigation {
  clear: both;
  display: block;
  float: left;
  width: 100%;
}

.main-navigation ul {
  position: relative;
  z-index: 999999;
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-navigation li {
  display: inline-block;
  float: left;
  margin: 0;
  padding: 0;
}

.main-navigation a {
  display: block;
  text-decoration: none;
}

.main-navigation ul li a {
  font-size: 16px;
  display: block;
  text-decoration: none;
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
  color: #F1EFEB;
  padding: 0px 63px;
  line-height: 4em;
}