JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
  	<li>
        <a href="#" class="blue">CONTACT</a>
    </li>
    <li>
        <a href="#" class="blue">ABOUT</a>
    </li>
    <li>
        <a href="#" class="blue">PORTFOLIO</a>
    </li>
</ul>

CSS

body{
    background: #000;
}
ul{
	list-style-type:none;
	display: inline-block;
}

.nav{
	float:right;
	list-style-type:none;
	overflow: hidden;	
}

.nav li{
	float:right;
	overflow: hidden;
	color: #00bff3;
	border: 1px solid #00bff3;
	padding: 8px;
	margin-left: 10px;
	text-align: center;	
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
}

.nav li:hover{
	background:#00bff3;
	color:#000000;
}

.blue{
	color: #00bff3;
	text-decoration: none;
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
}

.nav li:hover .blue{
	color:#000000;
}