JSFiddle - React, Tailwind, and code Playground

HTML

<div style="background-color:black;height:800px;">
<div class = "menu">

<ul>
<li><a href="#">Homepage</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>

</ul>


</div>
</div>

CSS

.menu {

position: absolute;
top: 380px;
font-family:"Arial Black", Gadget, sans-serif;
text-transform:uppercase;

}

.menu li {
display: inline;
margin: 0px 30px 0px 30px;
color: white;
}
.menu li a {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding:15px;
}

.menu a {
text-decoration: none;
color: white; 

}

.menu li:hover a {
background: #fff;
color: #3059d6;
}