JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Web Hosting</a></li>
                <li><a href="">VPS Hosting</a></li>
                <li><a href="">Login</a></li>
                <li><a href="">Contact Us</a></li>
            </ul>
        </div><!-- menu -->

</div>

CSS

#menu {
    display:inline;
    float:right;
}
#menu > ul > li {
    display:inline-block;
    margin-right:20px;
    min-width:70px;
}
#menu > li {
    display:inline-block;
    list-style:none;
    margin-left:auto;
    margin-right:auto;
}
#menu > li:hover {
    color:#000000;
}
#menu li a {
    display:block; 
    padding-top:25px;   
    border-top:4px solid #FFFFFF;
    color: #FFFFFF;
	text-decoration:none;
	text-align: center;
}
#menu li a:hover { 
    border-color:#000000; 
    color:#000000;
}