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:0;
    padding:0;
    margin-bottom: 1em;
    
}

li {
    list-style:none;
    margin: 0;
    border-bottom: 1px solid red;
    padding: 0;
}
.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

// jquery.columnlist.js
// @weblinc, @jsantell (c) 2012

;(function( $ ) {
    $.fn.columnlist = function ( options ) {
        options = $.extend( {}, $.fn.columnlist.defaults, options );

        return this.each(function () {
            var
              $list     = $( this ),
              size      = options.size || $list.data( 'columns-num' ) || 1,
              $children = $list.children( 'li' ),
              perColumn = Math.ceil( $children.length / size ),
              $column;
            for (var i = 0; i < size; i++) {
                $column = $('<ul />').appendTo( returnColumn( i, size ) );
                for ( var j = 0; j < perColumn; j++ ) {
                    if ( $children.length > i * perColumn + j ) {
                        $column.append( $children[ i * perColumn + j ]);
                    }
                }
                $list.append( $column.parent() );
            }
        });

        function returnColumn ( inc, size ) {
            return $('<li class="' + options[ 'class' ] + size +'"></li>');
        }
    };

    $.fn.columnlist.defaults = {
        'class'        : 'span1-'
    };

})( jQuery );

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) {
    return...