JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
			<a href="http://www.facebook.com">
				<div id="home">
					<p>Home</p>
				</div>
			</a>
			<a href="">
				<div id="about">
					<p>About Me</p>
				</div>
			</a>
			<a href="">
				<div id="contact">
					<p>Contact</p>
				</div>
			</a>
		</nav>

CSS

body {
	background: url('http://gamerturka.com/wp-content/uploads/2013/03/Black-Background-Wood-Clean-2560x1600-by-Freeman.jpg');
}

#home, #about, #contact {
	text-align: center;
	color: white;
	display: inline-block;
	padding-top: 0px;
	font-family: Tahoma;
	height: 50px;
	padding: 10px;
	background: black;
	opacity: 0.5;
	width: 403.55px; 
	font-size: 30px;
	border-bottom: solid 5px black;
	line-height: 0px;
	vertical-align: top;
}




#home:hover, #about:hover, #contact:hover {
	border-bottom: solid 5px yellow;
} 


nav {
	display: block;
	background: rgba(255,255,255,0);
	width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

a {
	text-decoration: none;
	color: white;
}