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>
</nav>

CSS

.header-nav {
	float: left;
	line-height: 115px;
}
.header-nav a {
	font: bold 13px Arial;
	color: #000;
	text-decoration: none;
	text-transform: uppercase;
	padding: 5px 20px;
	margin-left: 15px;
    display: inline-block;
}
.header-nav a:hover {
	border-top: solid 5px #2aacc8;
	background: #fff;
	
}

.header-nav .nav-arrow {
    position: relative;
}

.header-nav .nav-arrow:after {
    content: '';
    position: absolute;
    right: 2px;
    width: 16px;
    height: 16px;
	background: url("https://cdn0.iconfinder.com/data/icons/typicons-2/24/arrow-back-16.png") no-repeat right;
}