JSFiddle - React, Tailwind, and code Playground

by mrleroylee

HTML

<ul class="list">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li></ul>

JavaScript

function splitList($list, nCol, wCol, sCol, hCol) {
    var i, k;
    hCol = !hCol ? Math.ceil($list.children().length / nCol) : hCol;
    var pCol = sCol/2;
    for (i = 0; i < nCol; i++) {
        $list.append("<ul class='liCol'></ul>");
        for (k = 0; k < hCol; k++) {
            $list.children("li").eq(0).appendTo(".liCol:last");
        }
    }
    $(".liCol").css({"width":wCol+"px","float":"left","padding-left":pCol+"px","padding-right":pCol+"px"});
    $(".liCol:first-child").css("padding-left",0);
    $(".liCol:last-child").css("padding-right",0);
    $list.show();
}
$(document).ready(function() {
    splitList($(".list"), 3, 110, 20, 3);
});