JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
<div class="inner">
<p class="tile">Box 1</p>
<p class="tile">Box 2</p>
<p class="tile">Box 3</p>
<p class="tile">Box 4</p>
<p class="tile">Box 5</p>
</div>
</div>

CSS

.outer {text-align: center;}
  .inner {
    
    display:inline-block;
    width:700px;    
    text-align:left;
    
  }
  .tile {display: inline-block; text-align: left; width: 200px; height: 100px; border: 10px solid black; margin: 0 10px 10px 0;}
  
@media(max-width:800px){
  
  .inner {
    
    width:500px;    
    
  }  
  
}

@media(max-width:600px){
  
  .inner {
    
    width:220px;    
    
  }  
  
}