JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<div class="wrapper">
	<header class="header">
		<h1>Some logo</h1>
		<ul class="nav">
			<li><a href="">Menu Links</a></li>
			<li><a href="">Menu Links</a></li>
			<li><a href="">Menu Links</a></li>
			<li><a href="">Menu Links</a></li>
		</ul>
	</header>
	
	<main class="main">
		<br>
		<p>This would be your main content area</p>
		<br>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aspernatur error deleniti modi ratione dolor culpa nobis fugiat nesciunt obcaecati dignissimos quidem ex at quas illo laudantium voluptates consectetur repellendus.</p>
	</main>
	
	<div class="push"></div>
	
</div> <!-- /wrapper  -->
	
<footer class="footer">
	<p>Write some footery stuff here</p>
	<p>The kind that no ones cares about :D</p>
	<p>The kind of text that is so damn long that your footer height changes on a smaller screen.</p>
	<p><a href="http://blog.karenmenezes.com/2014/jan/14/ryan-faits-sticky-footer-responsive" style="color: #fff;">BACK TO DEMO</a></p>
</footer>

CSS

/* RESET */
html, body, div, span, h1, h2, h3, h4,
h5, h6, p, a, em, img, b, i, ul, li {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, main, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

/* END RESET */

* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	line-height: 1.2;
}

/* required for sticky footer */

html, body {
	height: 100%;
}

.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
}

.main {
	padding: 10px;	
}

/* end required for sticky footer */

.header, .header a, .footer {
	background: #000;
	color: #fff;
}

.nav {
	list-style: none;
}

.nav li {
	display: inline-block;
}

JavaScript

$(document).ready(function(){
		$(window).resize(function(){
			var footerHeight = $('.footer').outerHeight();
			var stickFooterPush = $('.push').height(footerHeight);
		
			$('.wrapper').css({'marginBottom':'-' + footerHeight + 'px'});
		});		
		$(window).resize();
	});