JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table">
        <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">7</div>
</div>

CSS

.table {
    display:flex;
    flex-wrap: wrap;
}
.cell {
    width: 33.3333%;
}

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


.cell:nth-child(1) {background:#d0d0d0;}
.cell:nth-child(2) {background:#737373;}
.cell:nth-child(3) {background:#3b3b3b;}
.cell:nth-child(4) {background:#ff8400;}
.cell:nth-child(5) {background:#910000;}
.cell:nth-child(6) {background:#420000;}