JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<div class="container">
   <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>

CSS

.block{
   box-sizing: border-box;
   float: left;
   width: 25%;
   height: 150px;
   border: 3px solid tomato;
   margin-bottom: 10px;   
}
.block:nth-of-type(4){
  height: 50px;
  border-color: royalblue;
}
.block:nth-of-type(4n + 5){
  clear: left;
}

@media screen and (max-width: 767px) {		
	
	.block{    
     width: 33.3333333333333%;     
  }
  .block:nth-of-type(3){
    height: 50px;
    border-color: royalblue;
  }
  .block:nth-of-type(4n + 5){
    clear: none;
  }
  .block:nth-of-type(3n + 4){
    clear: left;
  }
	
}

@media screen and (max-width: 479px) {		
	
	.block{    
     width: 50%;     
  }
  .block:nth-of-type(2){
    height: 50px;
    border-color: royalblue;
  }
  .block:nth-of-type(3n + 4){
    clear: none;
  }
  .block:nth-of-type(2n + 3){
    clear: left;
  }
	
}