JSFiddle - React, Tailwind, and code Playground

by doctor23

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<ul id="menu"></ul>

CSS

.ui-menu {
    width: 150px;
}

JavaScript

$(function () {

    var data = {
  menu: [{
      name: 'Croatia2222',
      link: '0',
      sub: null
    },
    {
      name: 'England',
      link: '1',
      sub: [{
          name: 'Arsenal',
          link: '0-0',
          subject: null
        },
        {
          name: 'Liverpool',
          link: '0-1',
          subject: null
        },
        {
          name: 'Manchester United',
          link: '0-2',
          subject: [{
              name: 'Arsenal',
              link: '0-0',
              sub: null
            },
            {
              name: 'Liverpool',
              link: '0-1',
              sub: null
            },
            {
              name: 'Manchester United',
              link: '0-2',
              sub: null
            }
          ]
        }
      ]
    },
    {
      name: 'Spain',
      link: '2',
      sub: [{
          name: 'Barcelona',
          link: '2-0',
          sub: null
        },
        {
          name: 'Real Madrid',
          link: '2-1',
          sub: null
        }
      ]
    },
    {
      name: 'Germany',
      link: '3',
      sub: [{
          name: 'Bayern Munich',
          link: '3-1',
          sub: null
        },
        {
          name: 'Borrusia Dortmund',
          link: '3-2',
          sub: null
        }
      ]
    }
  ]
};
    var getMenuItem = function (itemData) {
        var item = $("<li class='menu__item'>")
            .append(
        $("<a>", {
            href: '#' + itemData.link,
            html: itemData.name
        }));
        if (itemData.sub) {
            var subList = $("<ul class='submenu'>");
            $.each(itemData.sub, function () {
                subList.append(getMenuItem(this));
            });
            item.append(subList);
        }
        if (itemData.subject) {
            var subjectList = $("<ul class='submenu2'>");
            $.each(itemData.subject, function () {
                subjectList.append(getMenuItem(this));
           ...