JSFiddle - React, Tailwind, and code Playground
by andfinally
HTML
<div id="output"></div>
Babel + JSX
const sections = {
"0": {
"items": [
{
"ID": 2150986,
"elem_id": "",
"title": "Features",
"classes": "menu-item-2150986",
"attributes": {
"href": "#2150986",
"data-tracks": "nav_menu_click",
"data-tracks-url": "#"
},
"href": "#2150986"
},
{
"ID": 1792807,
"elem_id": "",
"title": "Extensions Store",
"classes": "menu-item-1792807",
"attributes": {
"href": "#1792807",
"data-tracks": "nav_menu_click",
"data-tracks-url": "#"
},
"href": "#1792807"
},
{
"ID": 1820233,
"elem_id": "",
"title": "Theme Store",
"classes": "menu-item-1820233",
"attributes": {
"href": "#1820233",
"data-tracks": "nav_menu_click",
"data-tracks-url": "#"
},
"href": "#1820233"
},
{
"ID": 401271,
"elem_id": "",
"title": "Support",
"classes": "menu-item-401271",
"attributes": {
"href": "#401271",
"data-tracks": "nav_menu_click",
"data-tracks-url": "#"
},
"href": "#401271"
},
{
"ID": 2092363,
"elem_id": "",
"title": "Blogs",
"classes": "menu-item-2092363",
"attributes": {
"href": "#2092363",
"data-tracks": "nav_menu_click",
"data-tracks-url": "#"
},
"href": "#2092363"
}
]
},
"401271": {
"items": [
{
"ID": 1793432,
"elem_id": "",
"title": "Documentation",
"classes": "menu-item-1793432",
"attributes": {
"href": "https://docs.woocommerce.test/",
"data-tracks": "nav_menu_click",
"data-tracks-url": "https://docs.woocommerce.test/"
},
"href": "https://docs.woocommerce.test/"
},
{
"ID": 1793434,
"elem_id": "",
"title": "Submit a ticket",
"classes": "menu-item-1793434",
"attributes": {
"href": "https://www.woocommerce.test/my-account/tickets/",
"data-tracks": "nav_menu_click",
"data-tracks-url": "https://www.woocommerce.test/my-account/tickets/"
},
"href":...