JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
 <div class="header"></div>
 <div class="middle">
 <div class="left">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum debitis eveniet quod? Perferendis, quod est rerum nobis doloribus explicabo cupiditate sint a voluptas optio voluptates non magni magnam totam consequatur nulla amet! Fugit, distinctio delectus vel consequuntur vitae. Vel, veritatis, facere et temporibus rem nesciunt magni quam labore dolorum ex sit iure ducimus omnis accusantium deserunt reiciendis quisquam aut quasi ut eius ad illum similique dolore in enim obcaecati exercitationem doloremque modi asperiores laudantium. Quaerat, consequuntur, nostrum, unde sit voluptatibus accusamus blanditiis nemo numquam quas nesciunt laborum nobis molestiae explicabo voluptatem veritatis aperiam harum. Obcaecati, magni, repellendus, explicabo, excepturi laborum dolores labore ducimus voluptatum alias minima modi dolor molestiae eveniet cum error vel debitis quasi possimus voluptas aliquam fugit optio hic minus expedita quibusdam ex veritatis earum fugiat enim blanditiis odio tenetur aspernatur magnam libero nulla officiis doloremque nam sit iusto impedit beatae eos accusantium unde repudiandae quos sunt. Amet ut recusandae earum dolorum aut consectetur fugiat nesciunt veritatis? Quibusdam, officia, nihil, expedita optio pariatur nemo necessitatibus assumenda placeat accusantium architecto cupiditate provident rem. Sunt, qui sequi cupiditate ullam veritatis consequatur temporibus officia totam sed facere. Dolorum rerum cum libero ducimus perferendis quo non odit nisi placeat beatae? Maxime, non!</div>
 <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, a, eveniet, obcaecati voluptatum quam voluptatibus recusandae distinctio soluta impedit expedita nobis animi eaque fugiat! Deserunt, ipsam, asperiores, quibusdam soluta inventore labore exercitationem sequi dicta quo numquam autem eaque incidunt quas amet adipisci impedit reprehenderit modi...

CSS

* {
      margin: 0;
      padding: 0;
    }
    html {
     height: 100%;
    }
    body {
      width: 100%;
      height: 100%;
      background: #3194d6;
      background: -moz-linear-gradient(top,  #3194d6 0%, #1f32dd 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3194d6), color-stop(100%,#1f32dd));
      background: -webkit-linear-gradient(top,  #3194d6 0%,#1f32dd 100%);
      background: -o-linear-gradient(top,  #3194d6 0%,#1f32dd 100%);
      background: -ms-linear-gradient(top,  #3194d6 0%,#1f32dd 100%);
      background: linear-gradient(to bottom,  #3194d6 0%,#1f32dd 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3194d6', endColorstr='#1f32dd',GradientType=0 );
    }
    div.wrapper {
      width: 1000px;
      margin: 0 auto;
      height: auto !important;
      height: 100%;
      min-height: 100%;
    }
    div.middle {
      width: 100%;
      position: relative;
      padding: 0 0 60px;
    }
    div.middle:after {
      content: "";
      display: table;
      clear: both;
    }
    div.header {
      float: left;
      width: 100%;
      height: 100px;
      background: #E8572C;
    }
    div.left {
      float: left;
      width: 20%;
      background: #2C5EE8;
    }
    div.content {
      float: left;
      background: #9CF767;
      width: 60%;
    }
    div.right {
      float: right;
      width: 20%;
      background: #2CCEE8;
    }
    div.footer {
      width: 1000px;
      margin: -50px auto 0;
      background: #AD7A29;
      height: 50px;
      position: relative;
    }