JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
			<ul>
				<li>Home</li>
				<li>About</li>
				<li>Downloads</li>
				<li>Contact</li>
			</ul>
		</nav>

<section>
			<div class="front">
				<div class="slider">
					<ul>
						<li><img src="http://examplesof.com/photography/nature/trees-of-colours.jpg"/></li><li><img src="http://kriscounette.k.r.pic.centerblog.net/o/b80af5a2.jpg"/></li>
					</ul>
				</div>
			</div>
		</section>

CSS

/*nav code below*/
nav{
	position:fixed;
	z-index:10;
	left:0px;
	top:0px;
	
	width:100%;
	height:50px;
	background:#222;
}
nav ul{
	padding:0px;
	margin:0px;
	list-style-type:none;
}
nav ul li{
	color:#ccc;
	font-family:Arial;
	display:inline-block;
	font-size:18px;
	line-height:50px;
	padding:0px 10px 0px 10px;
	float:left;
	-moz-transition:all 0.2s;
	transition:all 0.2s;
}
nav ul li:hover{
	background:rgba(0,0,0,0.4);
}

/*section code below*/

body{
	margin:0px;
}
section{
    margin-top:50px;
}
.front{
	height: calc(100vh - 50px);
	width:100%;
}
.slider{
	width:auto;
	height:100%;
}
.slider ul{
	height:100%;
	width:auto;
	list-style-type:none;
	margin:0px;
	padding:0px;
}
.slider ul {
    white-space: nowrap;
}
.slider ul li {
	display: inline-block;
    vertical-align:top;
}
.slider ul li img{
	height:100%;
	width:100%;
}