JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="menu">
    <ul class="menu-line">
        <li class="menu-point"><a href="#" class="menu-link">About Us</a></li>
        <li class="menu-point"><a href="#" class="menu-link">Services</a></li>
        <li class="menu-point"><a href="#" class="menu-link">Products</a></li>
        <li class="menu-point"><a href="#" class="menu-link">Solutions</a></li>
        <li class="menu-point"><a href="#" class="menu-link">Price List</a></li>
        <li class="menu-point"><a href="#" class="menu-link">Contact</a></li>
        <li class="menu-point"><a href="#" class="menu-link">FAQ</a></li>
    </ul>
</nav>

CSS

body{
	background:#fcc;
}
.menu{
	position:relative;/*Поднимаем нижнюю тень меню в стеке слоев*/
    width:1024px; /* Ширина макета */
	margin:auto;
}
.menu-line{
	list-style-type:none;
	background:-moz-linear-gradient(top, #87ad4e, #7ec11a);
	background:-o-linear-gradient(top, #87ad4e, #7ec11a);
	background:-webkit-linear-gradient(top, #87ad4e, #7ec11a);
	background:linear-gradient(top, #87ad4e, #7ec11a);
	overflow:hidden;
	box-shadow:0 0 6px #000;
}
.menu-point{
	float:left;
	margin:0 20px;
}
.menu-link{
	position:relative;
	font-size:18px;
	line-height:50px;
	padding:25px 20px;
	text-decoration:none;
	color:#fff;
}
.menu-link:after{
	content:'';
	display:block;
	position:absolute;
	-o-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	width:20px;
	height:20px;
	bottom:-8px;
	left:50%;
	margin-left:-10px;
	background:#aad668;
}
.menu-link:hover{
	text-shadow:0 0 3px #fff;
}
.menu-link:hover:after{
	background:#fff;
	box-shadow:0 0 3px #fff;
	bottom:-6px;
}