JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<header class="header">
  My header
</header>

<main class="main">
  <div class="main__left">left</div>
  <div class="main__middle">middle</div>
  <div class="main__right">right</div>
</main>

<footer class="footer">
  My footer
</footer>

CSS

body {
  background-color: aqua;
}

.header {
  padding: 2rem;
  background-color: lightgray;
}

.main {
  display: flex;
  flex-direction: row;
}

.main__left {
  flex-basis: 1;
  flex-shrink: 0;
  flex-grow: 1;
  padding: 2rem;
  background-color: deepskyblue;
}

.main__middle {
  flex-basis: 2;
  flex-shrink: 0;
  flex-grow: 1;
  padding: 2rem;
  background-color: white;
}

.main__right {
  flex-basis: 1;
  flex-shrink: 0;
  flex-grow: 1;
  padding: 2rem;
  background-color: deepskyblue;
}

.footer {
  padding: 2rem;
  background-color: coral;
}