JSFiddle - React, Tailwind, and code Playground

by oti ext

HTML

<div class="Header"></div>

<div class="Content">
    <div class="Side"></div>
    <div class="Main"></div>
</div>

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

CSS

*{margin: 0;padding: 0;box-sizing: border-box}
html,
body {
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
}

.Header,
.Footer {
  flex-shrink: 0;
}

.Content {
  flex-grow: 1;
  display: flex;
  align-items: stretch;
  
  background-color: skyblue;
}

.Side {
  width: 200px;
  background-color: tomato;
}

.Main {
  flex-grow: 1;
  background-color: gold;
}

/* a touch of color and height for lack of content */
.Header {
  height: 5rem;
  background-color: #788dda;
}

.Footer {
  height: 2rem;
  background-color: #78daad;
}