JSFiddle - React, Tailwind, and code Playground

by Tien Tran

HTML

<div class="product-bound">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
</div>

CSS

.product-bound .item{
  width:23%;
  height:200px;
  padding:1%;
  float:left;
}
.product-bound .item:nth-child(4n+1){background-color:#FFBF00}
.product-bound .item:nth-child(4n+2){background-color:#FF8601}
.product-bound .item:nth-child(4n+3){background-color:#B3D52C}
.product-bound .item:nth-child(4n+4){background-color:#1F8A70}