JSFiddle - React, Tailwind, and code Playground

by Tien Tran

HTML

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

CSS

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