JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.airve.com/scripts/response/v0/response.0.5.1.min.js"></script>
	<div id="cssninja">
		<p><a href="http://www.thecssninja.com/">Example from the [CSS] Ninja</a></p>
	</div>
	
	<header>
		<div class="container">
			<h1>Amazing product!!!</h1>
			<h2>Fixes every problem you ever had</h2>
		</div>
	</header>
	
	<section>
		<div class="container">
			<h1>Reasons to give me money for beer</h1>
			<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at dui lacus. In at rutrum ligula. Cras tempus condimentum arcu nec viverra. Pellentesque et velit nunc. Aenean id odio lectus, volutpat lobortis risus. Nullam sodales nulla vitae turpis porta tincidunt. Etiam facilisis orci vel lorem euismod a dictum libero pretium. Fusce ultrices fringilla adipiscing.
			</p>
			<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra mattis neque quis dapibus. Integer euismod hendrerit arcu, nec aliquam massa sagittis at. Fusce sodales dapibus lectus sed eleifend. Donec et sapien adipiscing nisi consequat sodales quis ac augue. Morbi eu magna et libero auctor fermentum ut non dolor. Integer convallis sapien sit amet risus facilisis eu euismod metus cursus. Nam at fermentum velit. Proin tempus leo augue, non elementum diam. Nunc ultrices sollicitudin ligula at egestas. Fusce cursus gravida tincidunt.
			</p>
			<p>
			Fusce eu massa augue. In commodo dolor ac orci porttitor vitae mollis erat posuere. Aenean adipiscing sollicitudin elit, vel imperdiet orci ultricies ut. Proin vestibulum gravida mauris, ac auctor purus laoreet ut. Aenean sit amet sodales lorem. Sed ut nunc vehicula nisi ultrices vestibulum nec ut arcu. Duis euismod ligula eget justo euismod pulvinar. Aenean vitae lacus ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius interdum sapien, eleifend tempus leo commodo et. Mauris at lectus et lectus vehicula dapibus at eu diam.
			</p>
			<p>
			Etiam semper mattis tincidunt. Curabitur vitae...

CSS

#cssninja
{
	position: absolute;
	top: 0;
	left: 0;
	background-color: #18191d;
	width: 100%;
	height: 40px;
}
	#cssninja p
	{
		color: #ffffff;
		text-align: center;
		margin: 10px 0 0 0;
	}
	#cssninja a
	{
		color: #ffffff;
		text-decoration: none;
		background: url(../assets/ico_ninja.gif) 0 0 no-repeat;
		padding: 4px 0 9px 28px;
	}
	#cssninja a:hover
	{
		text-decoration: underline;
	}

/* Colour scheme stolen from http://cheddarapp.com/ cause it's pretty */
	
header {
	padding: 26px;
	background: #FF7243;
	min-height: 200px;
}
	header h1 {
		font-size: 60px;
	}
	header h2 {
		font-size: 40px;
	}

section {
	background: #0881B3;
	padding: 26px;
	margin-bottom: 350px;
	box-shadow: 0 10px 10px rgba(0,0,0,0.5);
}

header,section {
	position: relative;
	z-index: 2;
}

footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 300px;
	background: #fff;
	color: #999999;
	padding: 26px;
	z-index: 1;
}
	footer h1 {
		color: #999999;
	}
	
.container {
	width: 80%;
	max-width: 960px;
	margin: 0 auto 40px;
}

p {
	-webkit-columns: 3;
	-moz-columns: 3;
	columns: 3;
}

.field {
	width: 45%;
	float: left;
	margin: 0 5% 16px 0;
}
	.field label {
		display: block;
		font-size: 16px;
		color: #999;
		margin-bottom: 5px;
	}
	.field input {
		-moz-box-sizing: border-box;
		background-color: white;
		border: 1px solid #B8BBC2;
		border-radius: 5px 5px 5px 5px;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) inset;
		padding: 5px;
		width: 100%;
	}

.btn {
	background: #2C7AD0;
	color: #FFFFFF;
	padding: 6px;
	text-decoration: none;
	border: 1px solid #4c4c4c;
	border-radius: 5px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

.btn:hover,
.btn:active {
  background-color: #0055cc;
}