JSFiddle - React, Tailwind, and code Playground

by dustinpoissant

HTML

<ul>
    <li>{List 1 Item 1}</li>
    <li>{List 1 Item 2}</li>
    <li>{List 1 Item 3}</li>
    <li>{List 2 Item 1}</li>
    <li>{List 2 Item 2}</li>
    <li>{List 2 Item 3}</li>
    <li>{List 3 Item 1}</li>
    <li>{List 3 Item 2}</li>
    <li>{List 3 Item 3}</li>
</ul>

CSS

ul li {
    display: inline-block;
}
.break {
    display: block;
}

JavaScript

/* jQuery Plugin wrapN */
(function ($) {
    $.fn.wrapN = function (wrapper, n, start) {
        if (wrapper === undefined || n === undefined) return false;
        if (start === undefined) start = 0;
        for (var i = start; i < $(this).size(); i += n)
        $(this).slice(i, i + n).wrapAll(wrapper);
        return this;
    };
}(jQuery));
$(document).ready(function () {
    $("li").wrapN("<span class='break' />", 3);
});