JSFiddle - React, Tailwind, and code Playground

by napotopia

HTML

<ul class="linkBullets mui-column" data-columns-num="4">
    <li>Air Conditioning</li>
    <li>Cruise Control</li>
    <li>Power Brakes</li>
    <li>Power Door Locks</li>
    <li>Power Seats</li>
    <li>Power Steering</li>
    <li>Power Windows</li>
    <li>Rear Window Defroster</li>
    <li>Tilt/Telescope Wheel</li>
    <li>Power Seats</li>
    <li>Power Steering</li>
    <li>Power Windows</li>
    <li>Rear Window Defroster</li>
    <li>Tilt/Telescope Wheel</li>
</ul>

CSS

ul {
    border:1px solid red;
    margin-bottom: 1em;
}
.span1-2, .span1-3, .span1-4, .span1-5, .span1-6 {
    float: left;
    box-sizing: border-box;
}
.span1-2 {
    width: 50%;
}
.span1-3 {
    width: 33.33333334%
}
.span1-4 {
    width: 25%;
}
.span1-5 {
    width: 20%;
}
.span1-6 {
    width: 16.66666667%
}

JavaScript

window.$ = window.$ || {};

// Namespace creator from YUI base
$.namespace = function () {
    var a = arguments,
        o = null,
        i, j, d;
    for (i = 0; i < a.length; i = i + 1) {
        d = ("" + a[i]).split(".");
        o = $;
        for (j = (d[0] == $) ? 1 : 0; j < d.length; j = j + 1) {
            o[d[j]] = o[d[j]] || {};
            o = o[d[j]];
        }
    }
    return o;
};

// Create namespace for util and ui under the man object
$.namespace('man.ui');


/** @function man.ui.columnize
 * @description Creates X number of columns out of an existing list.
 * @required base.css
 * @param {String|Object} so Selector or object with selector properties
 * @param {Object} options Options for columnize component [optional]
 * @example
 */
$.man.ui.columnize = function (el) {

    var $el = jQuery(el),
        $elBackup = $el.clone(),
        columnsLength = ($el.data('columns-num')) ? $el.data('columns-num') : 1,
        $children = $el.children('li'),
        childrenLength = $children.length,
        columns = [],
        i = 0;

    var maxColumnNumber = Math.ceil(childrenLength / columnsLength);
    // fill columns
    for (; i < childrenLength; i++) {
        //var columnNumber = Math.floor(i * columnsLength / childrenLength);
        //console.log('columnNumber: ', columnNumber);
        //console.log(i +' * '+ columnsLength +' / '+ childrenLength +' , '+ (i * columnsLength / childrenLength));
        
        
        //if ((i * columnsLength) % childrenLength == 0) {
            //console.log('modulus: ', (i * columnsLength) % childrenLength, i);                 
            //columnNumber += 1;
        //}
        
        if (!columns[columnNumber]) {
            columns[columnNumber] = [];
        }
        
        for (var c = 0; c < maxColumnNumber; c++) {
        
            var columnNumber = c + 1;
            
            if (columns[columnNumber] && columns[columnNumber].length != maxColumnNumber) {
               ...