JSFiddle - React, Tailwind, and code Playground

by Miro Hristov

HTML

<div class="wrapper">
			<div class="header"></div>
			<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor sit amet, consectetur adipisicing elit. Neque, quia!</div> 
			<div class="footer"></div>
		</div>

CSS

html, body { 
	height:100%;
	margin: 0;
	padding: 0;
}

.wrapper { 
	min-height: 100%;
  height:100%;
	position: relative;
  display: table;
  width:100%;
}

.header { 
	height: 75px;
	padding: 10px;
	background-color: red;
  display:block;
}  

.content { 
  background:pink;
  display:table-row;
  height: 100%;
}

.footer { 
	width:100%;
	height: 75px;
	bottom: 0;
	position: absolute;
	background-color: orange;
  display:block;
}