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 {
  border: solid 1px #333839;
  height: 45px;
  line-height: 45px;
  float: left;
  width: auto;
  margin-left: 1px;
}
.navigator ul li::after {
  content: "";
  height: 100%;
  width: 1px;
  vertical-align: baseline;
  border-right: solid 1px black;
  display: inline-block;
}
.navigator ul li a {
  text-decoration: none;
  color: #ababab;
  padding: 0 20px;
  font-family: 'Arial';
  display: block;
}