JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
		<div class="header">
			<p>1</p><ul>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</div>	

		<div class="one slide">
			p*100>lorem
		</div>

		<div class="two slide">
			123asd	
		</div>
		
	</div>


	<div class="footer">
		<p>footer</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita reprehenderit consequuntur vel eius. Debitis unde voluptate perferendis commodi repellat, eos ad nam, numquam impedit repellendus, corporis, aut nihil doloremque nisi?</p>
	</div>

CSS

html {
	position: relative;
	min-height: 100%;
}
body {
	margin: 0 0 100px; /* 100px has to match with footer height, thus this change footer height */
}
/* basic set up*/
.header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	background-color: #CCCC52;
	width: 100%;
	height: 6%;
}
.footer {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 100px;
	width: 100%;
	background-color: blue;
	margin-bottom: 0;
}
/* header */
	.header p, .header ul, .header ul li {
		display: inline-block;
		*display: inline;
		zoom: 1;
	}
	.header p, .header ul {
		margin: 0.5% 0 0 0;
		padding: 0;
		width: 50%;
	}
		.header p {
			margin-left: 2%;
			width: 48%; 
		}
		.header ul {
			text-align: right;
			list-style-type: none;
		}
		.header ul li {
			margin: 0 5%;
			padding: 1.5% 2%;
			background-color: #e44c65;
		}
/* banner */
	.wrapper {
		position: absolute;
		top: 6%;
		left: 0;
		width: 100%;
		min-height: 100%;
		height: 845.06px;
		background-color: green;
		background-repeat: no-repeat;
		/*background-size: cover;*/

	}
	.one {
		background-color: #E6E65C;
	}
	.two {
		background-color: red;
	}