JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div class="category">foo1</div>
    <div class="category">foo2</div>
    <div class="category">foo3</div>
    <div class="category">foo4</div>
    <div class="category">foo6</div>
    <div class="category">foo7</div>
    <div class="category">foo8</div>
    <div class="category">fo9</div>
    <div class="category">foo10</div>
    <div class="category">foo11</div>
    <div class="category">foo12</div>
   <div class="category">foo13</div>
    <div class="category">foo14</div>
    <div class="category">foo15</div>
</div>

CSS

div{text-align: center;margin:0 auto}
.category{
    background-color: #111111;
    margin: 0px 15px;
    overflow: hidden;
    width: 50px;
    height: 50px;
    text-align: center;
display: inline-block;

JavaScript

jQuery( ".category" ).slice( 2, 3 ).after('<br>')
jQuery( ".category" ).slice( 6, 7 ).after('<br>')
jQuery( ".category" ).slice( 9, 10 ).after('<br>')