JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flax">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
</div>

CSS

.flax {
    width:100%;
    display:flex;
    flex-wrap:wrap;
}
.cell {
    width:30.333%;
    margin:10px 1.5%;
    height:100px;
    font:20px/100px arial;
    text-align:center;
    color:#ffffff;
}
.cell:nth-child(1) {background:#e21010;}
.cell:nth-child(2) {background:#e2b810;}
.cell:nth-child(3) {background:#56b71c;}
.cell:nth-child(4) {background:#1c9fb7;}
.cell:nth-child(5) {background:#1c2bb7;}
.cell:nth-child(6) {background:#9c1cb7;}


@media screen and (max-width: 1000px) {  
  .cell {
    width:47%;
  }
}