JSFiddle - React, Tailwind, and code Playground

HTML

<header>Header</header>

<main>
	
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla viverra aliquam massa, a faucibus velit egestas vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut mauris at nisl ullamcorper rutrum quis eu ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse accumsan nulla sit amet nunc venenatis luctus. Vestibulum vestibulum eros velit, vel fermentum dolor scelerisque et. Proin dictum odio ante, eleifend auctor risus suscipit sit amet. Morbi at odio nec ligula placerat sodales ut eu nibh. Aenean ornare velit vitae nulla bibendum condimentum. Quisque porta et arcu ut gravida. Aenean sed lectus non orci convallis consectetur. Donec eget odio et leo dapibus vehicula. Morbi cursus lectus nec sem sagittis laoreet. Etiam fringilla lorem magna, nec blandit lorem malesuada condimentum. Etiam at ligula ac dui aliquam finibus vitae in ex. Sed feugiat aliquam nulla sagittis hendrerit. Nam et mauris justo. Proin volutpat ut nunc ut venenatis. Aliquam sagittis quam at purus fringilla sollicitudin. Integer condimentum venenatis quam, vitae congue justo viverra at. Praesent consequat porttitor justo, quis molestie ante ullamcorper vitae. Cras sit amet facilisis est. Morbi ut arcu quam. Duis vehicula nisl nec magna dignissim condimentum. Morbi scelerisque iaculis nisi ut sollicitudin. Sed vehicula erat lectus, vitae consequat est facilisis in. Suspendisse suscipit nec urna et posuere. Donec et ultricies turpis, vel volutpat sapien. Praesent hendrerit sit amet velit in fringilla. Suspendisse sollicitudin mi molestie libero lobortis condimentum. Phasellus dictum velit nec leo convallis, eu feugiat urna venenatis. Ut facilisis, ligula vel convallis varius, turpis neque pretium ante, eget hendrerit tortor magna in lacus. Nam velit dolor, iaculis vitae felis non, egestas porttitor lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam hendrerit, ante at...

CSS

body {
	display: flex;
	flex-flow: column;
	background: var(--background-colour);
	box-sizing: border-box;
	min-height: 100vh;
}

header {
	flex: 0;
  background: deepskyblue;
  padding: 25px 10px;
}

main {
	flex: 1 0 auto;
}

footer {
	width: 100vw;
	padding: 25px 10px;
	text-align: right;
	background: deeppink;
	flex: 0;
	box-sizing: border-box;
}