JSFiddle - React, Tailwind, and code Playground

HTML

<main>Main content</main>
	<nav>Navigation</nav>
	<footer>Footer</footer>

CSS

html{
		height: 100%;
	}
	body{
		display: flex;
		flex-direction: column;
		height: 100%;
		margin: 0;
	}
	body >*{
		background-color: #333;
		color: #bdbdbd;
		box-shadow:  0px 0px 10px 2px #000;
		text-shadow: 0 -1px 0 #000;
		padding: 10px;
	}
	
	main{
		height: 500px;
		order:1;
	}
	nav{
		order:0;
	}
	footer{
		order:2;
	}