JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.row{
    width:100%;
}
.cell {display:block;width:30%;padding:10px;float:left;}



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

@media screen and (max-width: 600px) {  
   .cell {display:block;width:45%;padding:10px;float:left;}
}