JSFiddle - React, Tailwind, and code Playground

by mauricederegt

HTML

<div id="container"></div>

CSS

ul li {
    margin-left: 5px;
    opacity: .85;
}
ul li:first-child a {
    color: red;
}
ul li a {
    color: black;
    display: block;
}

JavaScript

var Menu = function(data) {
    this.data = data;
};

var classes = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k'];
var f = 0;
var bR = 0;

Menu.prototype.render = function() {
    //console.log(this.data)
    var floors = $("<ul />");
    
    $.each(this.data, function(i, e) {
        var tempRow = $("<li />");
        var c = 0;
       
        $.each(e, function(j, f) {
         var randomClass;
         
         randomClass = Math.round(Math.random() * 10 + 0);
            tempRow.append($("<a></a>", {
                class: classes[randomClass],
                'data-i': bR++,
                'data-t': classes[randomClass],
                'data-f': f,
                'data-r': r,
                'data-c': c++,
                text: f.title,
                style: f.style
                
            }));
        });
        floors.append(tempRow);
        r++;
    });
    f++;
    return floors;
};

Menu.renderMenus = function(menus, root) {
    $.each(menus, function(key, val) {
        var m = new Menu(val),
            ul = m.render();
        ul.appendTo(root);
    });
}

var menu = 
[
    [//first ul
        [ //first row li 
            { //first <a> element
                title: "Test 1",
                style: "margin-top: -7.775em; margin-left: -6.9em;"
            },
            { //second <a> element
                class: "f",
                style: "margin-top: -7.775em; margin-left: -4.6em;"
            },
            { //second <a> element
                class: "b",
                style: "margin-top: -7.775em; margin-left: -2.3em;"
            },
            { //second <a> element
                class: "j",
                style: "margin-top: -7.775em; margin-left: 0em;"
            },
            { //second <a> element
                class: "g",
                style: "margin-top: -7.775em; margin-left: 2.3em;"
            },
            { //second <a> element
                class: "b",
                style: "margin-top:...