JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="square_container">
    <div class="square">
      box1
    </div>
    <div class="square">
      box2
    </div>
    <div class="square">
      box3
    </div>
    <div class="square">
      box4
    </div>
    <div class="square">
      box5
    </div>
  </div>
</div>

CSS

body{margin: 0;}
.square_container{
    display:inline-block;
    width: 950px;
    background-color: lightblue;
}
.square{
    background-color:red;
    height:150px;
    width:150px;
    float: left;
    margin:20px;
}
@media (max-width: 950px){
  .square_container{width: 760px}
}
@media (max-width: 760px){
  .square_container{width: 570px}
}
@media (max-width: 570px){
  .square_container{width: 380px}
}
@media (max-width: 380px){
  .square_container{width: 190px}
}