JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">	
	<nav>
		<ul>
			<li><a href="#">About Us</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Products</a></li>
			<li><a href="#">Solutions</a></li>
			<li><a href="#">Price List</a></li>
			<li><a href="#">Contact</a></li>
			<li><a href="#">FAQ</a></li>
		</ul>
	</nav>
</div>

CSS

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	transition: all .5;
}

body{
	font: 1.3em bold 'PT Sans', tahoma, sans-serif;
	background: #272822;
}

.container{
	width: 960px;
	margin: auto;
}

nav{
	margin: 50px auto 0;
}

nav ul{
	list-style: none;
	box-shadow: 0 0 3px 3px  rgba(0,0,0,.5);
	background: linear-gradient(#81BB28, #7DC018);
	height: 50px;
}

nav ul li{
	display: inline-block;
	position: relative;
	margin: 0 2.9%;
}

nav ul li:after{
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-bottom: 10px solid white;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	position: absolute;
	opacity: 0.5;
	left: 40%;
	bottom: 0px;
}

nav ul li:hover:after{
	opacity: 1;
	bottom: 3px;
}

nav ul li a{
	text-decoration: none;
	color: #fff;
	line-height: 50px;
	text-align: center;
}