JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">Menu</div>

<div class="wrap">
	<div class="sidebar">Sidebar</div>
	<div class="main">Main</div>
</div>

<div class="footer">Footer</div>

CSS

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

body {
	display: flex;
	background: #eee;
	flex-direction: column;
	min-height: 100%;
}

.menu {
	background: red;
	color: #fff;
	padding: 10px;
}
.wrap {
	display: flex;
}
.sidebar {
	background: #ddd;
	width: 300px;
}
.main {
	background: #ccc;
	flex: 1;
}
.footer {
	background: #000;
	color: #fff;
	padding: 10px;
}