JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
</div>
<div class="main">
    <div class="content">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
    <div class="side-bar"></div>
</div>
<div class="footer"></div>

CSS

body,html{
 padding:0;
 margin:0;
 height:100%;
}
.header{
   background:#49914b;
   width:100%;
   height:50px;
}

.main{
  width: 100%;
  min-width:360px;
  height: 100%;
  min-height: 100%;
  background:#ccc;
}

.footer{
  min-width: 960px;
  height: 101px;
  background: #9E9B9B;
  position: relative;
}
.side-bar{
    float:right;
    width:300px;
    height:100%;
    background:#499189;
}
.content{
  background:#496e91;
  width:640px;
  height:100%;
  float:left;
}

.content:before, .content:after{
  content: " ";
  display: table;
}
.content:after{
  clear: both;
}

.block{
    width:150px;
    height:100px;
    margin:10px 0 0 10px;
    background:red;
}