JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<ul>
    <li>li 1</li>
    <li>li 2</li>
    <li>li 3</li>
    <li>li 4</li>
    <li>li 5</li>
    <li>li 6</li>
    <li>li 7</li>
    <li>li 8</li>
    <li>li 9</li>
    <li>li 10</li>
    <li>li 11</li>
    <li>li 12</li>
    <li>li 13</li>
    <li>li 14</li>
    <li>li 15</li>
    <li>li 16</li>
    <li>li 17</li>
    <li>li 18</li>
    <li>li 19</li>
    <li>li 20</li>
    <li>li 21</li>
    <li>li 22</li>
    <li>li 23</li>
    <li>li 24</li>
    <li>li 25</li>
    <li>li 26</li>
    <li>li 27</li>
    <li>li 28</li>
    <li>li 29</li>
    <li>li 30</li>
</ul>
</div>

CSS

ul{margin-bottom: 15px;}

JavaScript

$(document).ready(function(){
    var container = $('#container');
    var lista = container.find('ul').last();
    $("li").each(function(indice) {
        lista = indice > 0 && indice % 3 == 0 ? $('<ul>').appendTo(container) : lista;
        lista.append(this);
    });
});