JSFiddle - React, Tailwind, and code Playground

HTML

<section id="topmenu">
		<nav id="menu">
			<ul>
				<li><a href="#">Lien</a></li>
				<li><a href="#">Lien</a></li>
				<li><a href="#">Lien</a></li>
				<li><a href="#">Lien</a></li>
			</ul>
		</nav>
	</section>

CSS

#topmenu {
	background: rgb(166,226,46);

	border-bottom: thin solid #aaa;
	border-top: thin solid rgba(255,255,255,.5);
}

#menu {
	font-size: 1.4rem;
}

#menu ul {
	height: 34px;
}

#menu li {
	display: inline;
	line-height: 34px;
	margin: 0;
}

#menu li a {
	margin: 0;
	color: #fff;
	padding: 0.75rem 1rem;
	border-right: thin solid rgba(0,0,0,.2);
	text-shadow: 0 -1px 0 rgba(0,0,0,.5);
	-webkit-box-shadow: 1px 0 0 rgba(255,255,255,.5);
	-moz-box-shadow: 1px 0 0 rgba(255,255,255,.5);
	-ms-box-shadow: 1px 0 0 rgba(255,255,255,.5);
	-o-box-shadow: 1px 0 0 rgba(255,255,255,.5);
	box-shadow: 1px 0 0 rgba(255,255,255,.5);
}

#menu li a:hover {
background: #aaa;
}

#menu li:last-of-type a {
	border-right: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-ms-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;
}