JSFiddle - React, Tailwind, and code Playground

by Manna

HTML

<body>

	<ul id="menu"></ul>
	<div id="maincontent"></div>


</body>

CSS

body{
	background: #dddddd
}

h1 {
	color: #c65d5d;
	text-align: center;
}

ul#menu {
	background: #c65d5d;
	font-family: sans-serif;
	height: 40px;
	width: 100%;
}

ul#menu a {
	font-weight: bold
}

ul#menu, ul#sublist, ul#menu li {
	margin: 0px;
	padding: 1% 5%;
	list-style-type: none;
}

ul#subList { 
    display:none;
}

ul#menu li {
	float:left;
}

ul#menu li a {
	color: #ffffff;
	background-color: #c65d5d;
	padding: 3px;
}

ul#sublist li { 
	float: none; 
	padding: 0;
	line-height: 2.2; 
}

ul#sublist li a {
	padding: 0px;
	margin: 0px;
}

ul#menu li:hover ul#subList {
	display: block;
	position: absolute;
	font-size: 12px;
	padding: 20px;
	background: #c65d5d;
}

ul#menu li:hover ul#sublist li a {
	display: block;
	width: 10em;
	border: none;
	padding: 2px;
	text-decoration: none
}

#maincontent {
	text-align: center;
	font-size: 24px;
	color: #c65d5d;
	margin-top: 200px
}

JavaScript

$(function() {

   var data = {
      "menu":[
         {
            "id":"contact",
            "leaf":true,
            "description":"Link",
            "link":"",
            "content":"contactUs.html",
            "cssClass":"static-content",
            "menu":null
         },
         {
            "id":"rules",
            "leaf":false,
            "description":"Link",
            "link":"",
            "content":"",
            "cssClass":"",
            "menu":[
               {
                  "id":"types",
                  "leaf":true,
                  "description":"SubLink",
                  "link":"",
                  "content":"wagerTypes.html",
                  "cssClass":"static-content wager-types",
                  "menu":null
               },
               {
                  "id":"odds",
                  "leaf":true,
                  "description":"SubLink",
                  "link":"",
                  "content":"oddsAndLines.html",
                  "cssClass":"static-content",
                  "menu":null
               },
               {
                  "id":"policies",
                  "leaf":true,
                  "description":"SubLink",
                  "link":"",
                  "content":"rulesAndPolicies.html",
                  "cssClass":"static-content rules-policies",
                  "menu":null
               },
               {
                  "id":"bonuses",
                  "leaf":true,
                  "description":"SubLink",
                  "link":"",
                  "content":"sportsBonuses.html",
                  "cssClass":"static-content",
                  "menu":null
               }
            ]
         },
         {
            "id":"conditions",
            "leaf":false,
            "description":"Link",
            "link":"",
            "content":"",
            "cssClass":"",
            "menu":[
               {
                  "id":"termsOfService",
                 ...