JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <nav class="navigator">
      <ul>
        <li><a href="#"></a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Freebies</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
  </nav>
</body>

CSS

* {
  margin: 0;
  padding: 0;
  outline: none;
}
body {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: linear-gradient(to bottom,  #2e3335 0%,#24282a 100%);
  background-repeat: no-repeat;
}
nav {
  height: 200px;
  width: 725px;
  padding-top: 20px;
  margin: 0 auto;
}
ul {
  list-style: none;
  height: 45px;
}
a:hover {
  color: #b0d157;
  text-shadow: 0 1px 0 #000000,
               0 0 20px #ffffff;
}
.navigator ul li {

  height: 45px;
  line-height: 45px;
  float: left;
  box-shadow:0 0 0 1px #1A1B1F, inset 0 0 3px rgba(255,255,255, .3);
 
}

.navigator ul li a {
  text-decoration: none;
  color: #ababab;
  padding: 0 20px;
  font-family: 'Arial';
  display: block;
}