JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.box {
  flex: 1 0 75px;
  height: 50px;
  margin: 5px;
  background-color: lightgreen;
}

@media screen and (max-width: 900px) {
  .box { flex: 1 0 calc(33% - 10px); } /* width less margin */
}

@media screen and (max-width: 600px) {
  .box { flex: 1 0 calc(50% - 10px); }
}

@media screen and (max-width: 300px) {
  .box { flex: 1 0 calc(100% - 10px); }
}