JSFiddle - React, Tailwind, and code Playground

HTML

<div class="center">       
    <div class="mc">FIRST BLOCK</div> 
    <div class="mc">SECOND BLOCK</div> 
    <div class="mc">THIRD BLOCK</div> 
    <div class="mc">FOURTH BLOCK</div> 
    <div class="mc">FIFTH BLOCK</div> 
</div>

CSS

.center { 
      width: 60%;
      margin: 0 auto;
      min-width: 400px;  
}
.mc {
     background:  #ededed;
     float: left;
     margin:  5px;
     border: 1px solid #aaa; 
     height: 200px;
    
}
@media screen and (max-width:  1160px ) { 
    .mc { 
             width: 95%; 
    } 
} 
@media screen and  (min-width: 1160px) { 
    .mc  { 
            width: 42%;        } 
    }