JSFiddle - React, Tailwind, and code Playground

by Raynos

HTML

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

CSS

ul li {
    margin-left: 5px;
    opacity: .85;
}
ul li a {
    color: black;
}

JavaScript

var Menu = function(data) {
        this.data = data; 
    };
        
    Menu.prototype.render = function(root) {
        var ul = $("<ul></ul>");
        var li = $("<li></li>");
        li.append($("<a></a>", {
            href: this.data.url,
            text: this.data.title
        })).appendTo(ul);
        ul.appendTo(root);
        if (this.data.menu) {
            Menu.renderMenus(this.data.menu, $("<li></li>").appendTo(ul));
        }
    };

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

    

var menu = 
[
    {
        title: "Best Known For",
        menuCaption: "Best Known For Caption",
        url: "/best-known-for",
        menu: [
                {
                    title: "Acting",
                    menuCaption: "Acting",
                    url: "",
                    menu: [
                            {
                                title: "Stage",
                                url: "/"
                            },       
                            {
                                title: "Screen",
                                url: "/"
                            },       
                            {
                                title: "Acting Three",
                                url: "/"
                            },       
                            {
                                title: "Acting Four",
                                url: "/"
                            },       
                            {
                                title: "Acting Five",
                                url: "/"
                            },       
                            {
                                title: "Acting Six",
                                url: "/"
                            }       
                    ]
                },
                {
                    title:...