JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="footer">
			<ul class="left">
				<li class="homeButton select"><img src="img/home.png" data-href="/home/home.html"></li>
				<li class="select"><p>About</p></li>
				<li><p>Contact</p>
					<ul class="dropup">
						<li class="select"><p>Chat</p></li>
						<li class="select"><p>E-mail</p></li>
						<li class="select"><p data-href="/faq/faq.html">FAQ</p></li>
					</ul>
				</li>
			</ul>
			<ul class="right">
				<li class="right"><p>Log In</p>
					<div class="login">
						<form>
							<h1>Log In</h1>
							<input type="text" placeholder="username"/>
							<input type="password" placeholder="password"/>
							<br>
							<div class="submit">Log In</div>
						</form>
					</div>
				</li>
			</ul>
		</nav>

CSS

nav{
	position:fixed;
	z-index:1000;
	bottom:0px;
	left:0px;
	right:0px;
	width:100%;
	height:40px;
	font-family:Arial;
	text-shadow:1px 1px 1px black;
	border-top:1px solid rgba(0,0,0,0.3);
	background:rgba(0,0,0,0.5);
	box-shadow: inset 0 1px rgba(255,255,255,0.3),  inset 0 10px rgba(255,255,255,0.2),  inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
}
nav ul{
	margin:0px;
	padding:0px;
}
nav li{
	font-size:17px;
}
.homeButton {
	padding:4px 10px;
}
.homeButton img{
	height:80%;
	width:80%;
	opacity:0.7;
}
.homeButton:hover img{
	opacity:1;
}

#footer > ul > li{
	display:inline-block;
	float:left;
	background:rgba(0,0,0,0.2);
}
#footer ul li p{
	margin:0px;
	padding:10px;
	color:#ccc;
	border-right:1px solid rgba(0,0,0,0.5);
}
#footer ul li:hover{
	background:rgba(0,0,0,0.5);
}
/*drop-up menu*/
#footer ul li ul.dropup{
	display:none;
	min-width:100px;
}
.dropup li{
	display:block;
}
#footer ul li:hover .dropup{
	display:block;
	position:absolute;
	bottom:40px;
	border:1px solid #111111;
	background:rgba(0,0,0,0.4);
	border-radius: 7px 7px 0px 0px;
}
#footer > ul > li > div{
	display:none;
}
#footer > ul > li:hover >div{
	display:block;
	position:absolute;
	bottom:40px;
	border:1px solid #111111;
	background:rgba(0,0,0,0.4);
	border-radius: 7px 7px 0px 0px;
	color:#ccc;
	min-width:100px;
	right:0px;	
}
.login > form > input:focus div.login{
	display:block;
}

.right{
	float:right;
}
.left{
	float:left;
}
.right li{
	border-left:1px solid rgba(0,0,0,0.5);
	border-right:none;
}


body{
	margin:0px;
	background-image:url('http://3.bp.blogspot.com/-0tkymvJajoA/TbLKVR6zfqI/AAAAAAAAAEE/NGN8yC-A76s/s1600/Nature+Image.jpg');
	background-size:100%;
	background-repeat:repeat;
}
/*section*/
section{
	position:fixed;
	top:0px;
	left:0px;
	height:calc(100vh - 40px);
	width:100%;
	color:white;
	overflow-y:auto;
}
.page{
	padding:10px;

}
/*login window*/
.login form input{
	display:block;
	margin:5px;
}
.login form{
	padding:20px;
}
.login form...