JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
		<div id="div_top" class="menu">		
			<nav>
				<ul>
					<li>
						<a href="#">HELLO</a>
					</li>
			
					<li>
						<a href="#">WORLD</a>
					</li>
					
					<li>
						<a href="index.html">BANANA</a>
					</li>
				</ul>
			</nav>
		</div>
</div>

CSS

#main 
{
	height: 175%;
	width: 100%;
	border: solid red 1px;
	position: absolute; top: 0; left: 0;		
    overflow: hidden;
    background-color: #333;
}

#div_top
{
    width:100%;
	height: 100px;
	margin-top: 20px;
	position: fixed;
	border: solid yellow 1px;
	
	text-align: center;
	font-size: 18px;
	font-weight: bold; 
	color: #fff;
	z-index: 100;
    right:0;
}

.menu a:link
{ 	
	color: #fff; 
	text-decoration: none;
		
}
.menu a:visited
{ 	
	color: #fff; 
	text-decoration: none;
}
.menu  a:hover
{ 
	background-color: rgba(100, 50, 0, 0.4);
	border-radius: 5px;
	border: solid white 2px;
	margin: -2px;
}
.menu a:active
{ 
	color: #fdd;
}
.menu ul
{
	list-style-type: none;	
	margin: 0px;
	padding: 0px;
	text-align: center;
}
.menu li
{
	display: inline-block;
	margin: 30px;	
}