JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
  <li><a href="#">About</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">LOGIN</a></li>
  <li><a href="#">SIGNUP</a></li>
</ul>

CSS

.nav {
  height: 344px;
  background-color: #0A0A0A;
  font-family: 'Open Sans', sans-serif;
  color: #EFEFEF;
  list-style: none;
  text-align: center;
  padding-top: 80px;
  margin-top: 0;
}

.nav > li {
  display: inline-block;
  padding: 0 50px 0 50px;
}

.nav > li > a {
	display: block;
  text-decoration: none;
  color: #EFEFEF;
  border: 1px solid #0A0A0A;
	padding: 5px 12px 5px 12px;
}

.nav > li > a:hover {
  border: 1px solid gray;
  border-radius: 4px;
  
}