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%;
	position: relative;
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
}

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

.content { 
  flex:1;
  background:pink;
}

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