JSFiddle - React, Tailwind, and code Playground

by Khris Roberts

HTML

<div class="body">
  <div class="c1">green</div>
  <div class="c2">yellow</div>
  <div class="c3">red</div>
  <div class="c4">blue</div>
</div>
<div class="footer">footer</div>

CSS

.c1{
  background-color:green;
}
.c2{
  background-color:yellow;
}
.c3{
  background-color:red;
}
.c4{
  background-color:blue;
}
.footer{
  background-color:gray;
}
@media only screen and (min-width: 0px) {
.c1{ width:100%; min-height:5vh; }
.c2{ width:100%; min-height:5vh; }
.c3{ width:100%; min-height:80vh;}
.c4{ width:100%; min-height:10vh;}
}
@media only screen and (min-width: 600px) {
.c1{ width:50%; min-height:10vh; float:left; }
.c2{ width:50%; min-height:10vh; float:left; clear:left;}
.c3{ width:50%; min-height:80vh; position:absolute;right:0;}
.c4{ width:50%; min-height:10vh; float:left; clear:left;}
}
@media only screen and (min-width: 768px) {
.c1{ width:25%;}
.c2{ width:25%; float:right;clear:right;}
.c3{ width:50%; left:25%;}
.c4{ width:25%;}
}