JSFiddle - React, Tailwind, and code Playground

HTML

<body>  

    <nav>  
        <ul id='navBar'>  
			<li><a href="#">link 1</a></li>  
			<li><a href="#">link 2</a></li>  
			<li><a href="#">link 3</a></li>  
		</ul>
    </nav>  
	
	
	
	<div id="contentWrapper">
	    <section id="intro">  
		<header>  
			<h2>Intro</h2>  
		</header>  
		<p>Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah.
			Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah.
			Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah.
		</p>
		</section>  
	</div>
 
    <footer>  
			<section id="about">
				<header>
					<h3>Footer</h3>
				</header>
				<p>some text here. </p>
			</section>
    </footer>  
  
</body>

CSS

html, body {
    margin: 0;
    padding: 0;
}

body {     
    font: 13px/22px Helvetica, Arial, sans-serif;  
    background: #f0f0f0;  
	
} 

.contentWrapper{
	 min-height: 100%;
	 margin-bottom: -142px; 
}

.contentWrapper:after {
  content: "";
  display: block;
  height: 142px; 
}

nav {
	background: #222;  
	color: #fff;
	list-style: none;
	font-size: 1.2em;
	padding: 10px 20px;	
	box-shadow: 0px 0px 4px 4px #888888; 
	
}

#navBar li{
	display:inline;
}

#navBar li a{
	color: #fff;
	text-decoration: none;
	padding: 25px;
}
#navBar li a:hover{
	background:#fff;
	color: #222;
	text-decoration: none;
	padding: 25px;
}

footer {
 	position:absolute; 	
	background: #222;  
	color: #fff;
	list-style: none;
	font-size: 1.2em;
	padding: 10px 20px;	
	bottom:0;
    width: 100%;
	
}