JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navigation" role="navigation">
    <div id="navbar" role="navigation">
        <a href="#" id="link1">Link</a><a href="#" id="link2">Link</a><a href="#" id="link3">Link</a><a href="#" id="link4">Link</a><a href="#" id="link5">Link</a><a href="#" id="link6">Link</a>
        </div> <!-- navbar div -->
    </div> <!-- navigation div -->

CSS

#navigation {
	width: 500px;
}

#navigation a, #navigation a:link, #navigation a:visited {
	color: #FFFFFF;
    text-decoration: none;
}

#navigation a:focus, #navigation a:hover, #navigation a:active, #navigation div div:focus a, #navigation div div:hover a  {
	color: #49527F;
	cursor: pointer;
}

#navbar {
	width: 500px;
	height: 50px;
	line-height: 50px;
	font-size: 30px;
	text-shadow: 0 0 3px #CECECE;
	background: rgba(240,240,241,.8);
	box-shadow: 0 0 2px 1px #CECECE, 0 -15px 25px 0 #F00 inset;
}

#navbar a, #navbar a:link, #navbar a:visited {
	display: inline-block;
	width: 83.3px;
	height: 50px;
	text-align: center;
}

#navbar a:focus, #navbar a:hover, #navbar a:active, #navbar a.active {
	color: #49527F;
    background: #B2B8C7;
}