JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
    <div id="nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Blog</a></li>
      </ul>
    </div>
    </div>

CSS

#wrap{
    width:40em; 
    height:3em;
    margin:0 auto;}

#nav {
    float:right;
    width:75%;
}

#nav ul {
  
    display:inline;
    list-style: none;
    float: right;
}

#nav li {
    float: left;
    padding-right:1em;
    width:50px;
}

#nav a {
    text-align:center;
    text-decoration:none;
    color: #888;
    font-size:1em;
    float: left;
}

#nav a:hover{
    color:#212121;
    display:block;
    width:20px;
    margin:0 auto;
	border-bottom:3px solid #000;
}