JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wrap">
<span class="brick">1</span>
<span class="brick">2</span>
<span class="brick">3</span>
<span class="brick">4</span>
<span class="brick">5</span>
<span class="brick">6</span>
<span class="brick">7</span>
<span class="brick">8</span>
<span class="brick">9</span>
<span class="brick">10</span>
<span class="brick">11</span>
<span class="brick">12</span>
<span class="brick">13</span>
<span class="brick">14</span>
<span class="brick">15</span>
<span class="brick">16</span>
<span class="brick">17</span>
<span class="brick">18</span>
<span class="brick">19</span>
</div>
CSS
body {
margin: 0;
padding: 0;
}
.wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.brick {
height: 40px;
border: 1px solid black;
width: 25%;
margin: 1%;
box-sizing: border-box;
}