JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">header</div>

<div class="container">
  <div class="block-1">
    <div>1</div>
  </div>
		
  <div class="block-2">
    <div>2</div>
  </div>

  <div class="block-3">
    <div>3</div>
  </div>
		
  <div class="block-4">
    <div>4</div>
  </div>
</div>

<div class="footer">footer</div>

CSS

.header{
  background: #e6e6e6;
  padding: 20px;
  border: 10px solid #fff;
}

.footer{
  background: #e6e6e6;
  padding: 20px;
  border: 10px solid #fff;
}

.container{
  box-sizing: border-box;
}

.container:after{
  content: '';
  display: block;
  clear: both;
}

[class^=block]{
  color: #fff;
  box-sizing: border-box;
}

[class^=block] div{
  padding: 20px;
  border: 10px solid #fff;
  text-align: center
}

.block-1 div{
  background: #673ab7;
  animation: height 5s infinite
}

.block-2 div{
  background: #e91e63;
  animation: height 5s infinite 2.5s
}

.block-3 div{
  background: #8bc34a;
}

.block-4 div{
  background: #4e342e;
}

@media (min-width: 320px){
  .block-1{
    float: left;
    width: 50%
  }
  
  .block-2{
    float: right;
    width: 50%
  }
  
  .block-3{
    float: left;
    width: 50%;
    clear: left;
  }
  
  .block-4{
    padding-left: 50%
  }

  .block-4 div{
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
  }
}

@keyframes height{
  0% {
    padding-bottom: 20px
  }
  50% {
    padding-bottom: 150px
  }
  0% {
    padding-bottom: 20px
  }
}