JSFiddle - React, Tailwind, and code Playground

HTML

<header class="main-header">Header</header>
<div class="row">
  <aside class="primary-sidebar">Sidebar (left)</aside>
  <main class="content">Main content goes here</main>
  <aside class="secondary-sidebar">Sidebar (right)</aside>
</div>
<footer class="main-footer">Footer</footer>

CSS

* {
  padding: 0;
  margin: 0;
}

body {
  font-size: 2em;
  display: flex;
  flex-direction: column;
  height: 100vh;
  text-align: center;
}

.row {
  flex: 1 1 auto;
  background: green;
  display: flex;
}

.main-header {
  background: red;
  flex: 0 0 auto;
}



.main-footer {
  background: red;
  flex: 0 0 auto;
}

.primary-sidebar, .secondary-sidebar {
  background: turquoise;
  flex: 0 0 auto;
  width: 250px;
}

.content {
  flex: 1 1 auto;
  min-width: 400px;
}