JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script type='text/template' id='src'>
    {{#splitter "rows" 5}}
        <ul class='row'>
            {{#each rows}}
            <li>{{text}}</li>
            {{/each}}
        </ul>
    {{/splitter}}
</script>

CSS

.row {margin:10px; border:1px solid red}

JavaScript

Handlebars.registerHelper('splitter', function (attr, count, opts) {
    var context, result, arr, i, zones, inject;

    context = this;
    arr = context[attr];
    zones = Math.ceil(arr.length / count);

    result="";
    for (i = 0; i < zones; i++) {
        inject = {};
        inject[attr] = arr.slice(i * count, (i + 1) * count);

        result += opts.fn(inject);
    }

    return result;
});


var data = {
    rows: [
        {text: "Row 1"},
        {text: "Row 2"},
        {text: "Row 3"},
        {text: "Row 4"},
        {text: "Row 5"},
        {text: "Row 6"},
        {text: "Row 7"},
        {text: "Row 8"}
    ]
};

var source= $('#src').html();
var template = Handlebars.compile(source);
var html = template(data);
$("body").append(html);