JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="header-nav">
			<a href="index.html">Home</a>
			<a href="#">About Us</a>
			<a href="#" class="nav-arrow">Services</a>
			<a href="#" class="nav-arrow">Portfolio</a>
			<a href="#">Blog</a>
			<a href="#">Contact Us</a>
		</nav>

CSS

.header-nav{
	float: right;
	line-height: 115px;
}
.header-nav a{
	font: bold 13px Arial;
	color: #000;
	text-decoration: none;
	text-transform: uppercase;
	padding: 5px 8px;
	margin-left: 15px;
    display: display: inline-block;
}
.header-nav a:hover{
	border-top: solid 5px #2aacc8;
	background: #fff;
	
}
.header-nav .nav-arrow{
	background: url("https://cdn0.iconfinder.com/data/icons/typicons-2/24/arrow-back-16.png") no-repeat right;
    padding-right: 24px;
}