JSFiddle - React, Tailwind, and code Playground

HTML

<header>Header</header>
<section>
  <aside>Sidebar</aside>
  <article>Page</article>
</section>
<footer>Footer</footer>

CSS

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

body {
  display: flex;
  flex-direction:column;
  justify-content: space-between;
}

.flex {
  display: flex;
} 

.row {
  flex-direction: row;
}

.column {
  flex-direction: column;
}

header {
	background: #FFD6D6;
}

section {
	background: #AAF9F6;
}

article {
  background: #A2C9EC;
}

aside {
  background: #BDEACE;
}

footer {
	background: #C9BDEA;
  margin: margin 0 0 0 0;
}