JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
<div class="a">1</div>
<div class="a">2</div>
<div class="a">3</div>
<div class="a">4</div>
<div class="a">5</div>
<div class="a">6</div>
<div class="a">7</div>
<div class="a">8</div>
<div class="a">9</div>
<div class="a">10</div>
<div class="a">11</div>
<div class="a">12</div>
<div class="a">13</div>
<div class="a">14</div>
<div class="a">15</div>
<div class="a">16</div>
<div class="a">17</div>
<div class="a">18</div>
<div class="a">19</div>
<div class="a">20</div>
<div class="a">21</div>
<div class="a">22</div>
<div class="a">23</div>
<div class="a">24</div>
<div class="a">25</div>
<div class="a">26</div>
<div class="a">27</div>
<div class="a">28</div>
</div>

CSS

.a {
    float:left;
    width:150px;
    height:150px;
    background:blue;
    margin:10px;
    font-size:30px;
    color:white;
    text-align:center;
}

.main {
    -webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
    column-count: 4;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    height:510px;
}