JSFiddle - React, Tailwind, and code Playground

HTML

<header class="clearfix">
  test
</header>

<div id="wrapper">
  <div id="content">
      Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />Content <br />
  </div><!-- end #content --> 
</div><!-- end #wrapper -->

<div id="footer">
          <center>footer</center>
</div>

CSS

/*********
Try to avoid using the * selector.
When you get more elements in your
page, it can slow browser rendering
*********/
* {
	margin:0; 				/* zero out margin */
	padding:0; 				/* zero out padding */
}
html, body {
	height:100%; 			/* gives layout 100% height */
	
	overflow:auto; 		/* triggers 100% height in Opera 9.5 */
	background:#2f3742;
	color: #B8C2CB;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
}
#wrapper {
	min-height:100%; 		/* gives layout 100% height */
	width:600px; 			/* centered div must be given a width */
	margin: -30px auto; 			/* centers #wrapper */
	background:#47535e;
	border: 1px solid #3D4857;
	border-bottom: 0;
	
}
/***********
What are you trying to select here?
You only need #wrapper if you're just
trying to select that, and otherwise
you need commas like this:

*, html, #wrapper {...}

************/
* html #wrapper { 
	height:100%; 			/* IE6 treats height as min-height */
}
#content {
	margin-top: 100px;
	padding: 5px;
}
p {
	font-size:1.8em;
	text-align:center;
	padding:30px 0 30px; 	/* bottom padding clears the #footer */
}
#header {
	height:70px;
	width:600px; 			/* centered div must be given a width */
/* 	margin: 0 auto -70px; */ 	/* -80px sucks it back in & auto centers it */
	background-color:#18232f;
	/* background-color:#2F3742; */
    position: absolute;
    top: 0;
	
	border-bottom: 1px solid #2F3A4A;
}

header {
  height: 70px;
  padding: 22px 25px;
  background: #18232f;
  text-align: center; 

  /***********
  You shouldn't ever use !important
  when you're coding from scratch.
  If you have to, it means there's
  a better way to do it.
  ***********/
  
  position: absolute !important;
  width: 100%;
  z-index: 1;
  top:0;
  left:0;
  
 
}

#footer {
	height:30px;
	width:600px; 				/* centered div must be given a width */
 	margin: 25px auto 0;		  	/* -80px sucks it back in & auto centers it */
	background:#2F3742;
	/* bottom: 0; */
	border: 1px solid #3D4857;
	border-top: 1px solid #2F3A4A;
}