JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='container'>

    <div id='navbar_buttons'></div>
    <div id='navbar_links'></div>
    
</div>

CSS

div, img, button {
    box-sizing: border-box;
}

body {
    background-image: url("http://griffusion.elementfx.com/pics/ui/bg-night.jpg");
    background-size: cover;
    background-attachment: fixed;
}

a {
    text-decoration: none;
}

#container {
    width: 90%;
    margin: auto;
}

/* top menu for navigation */ 

#navbar_buttons {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

#navbar_buttons .nav_button {
    padding: 5px;
    border: 1px solid black;
    background-color: #fff;
    width: 12%;
    text-align: center;
    transition: 0.2s;
}

#navbar_buttons .nav_button:hover {
    transition: 0.2s;
    background-color: silver;
    cursor: pointer;
}

#navbar_buttons .active_button {
    background-color: grey;
    transition: 0.2s;
}

/* Sub-menus, up to 8 links each. */
#navbar_links {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
}

#navbar_links .nav_links {
    width: 100%;
    margin: 20px auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    background-color: white;
    padding: 5px;
}

#navbar_links .nav_links .nav_link {
    /*border: 1px dotted grey;*/
    padding: 5px;
    width: 12%;
    text-align: center;
}

#navbar_links .nav_links .nav_link img {
    width: 100%;
    height: 40px;
}

JavaScript

let navbarOpen = false, navbarTab = 0;

const navbar = [
    {name: "Home", links: [
        ["News", "news"],
        ["Help Guide", "guide"],
        ["Rules", "rules"],
        ["Support Us", "premium"],
        ["Contact Us", "contact"],
        ["Just for fun", "misc"],
        ["Dev Blog", "dev"],
        ["?", "?"]
    ]},
    {name: "Flock", links: [
        ["My Flock", "flock"],
        ["Breeding", "breeding"],
        ["Incubation", "incubation"],
        ["Free Nest", "nest"],
        ["Strays", "strays"],
        ["?", "?"],
        ["Memorial", "memorial"],
        ["Retirement", "retirement"]
    ]},
    {name: "Local", links: [
        ["City", "local"],
        ["Arena", "arena"],
        ["Infirmary", "infirmary"],
        ["Battlefield", "battlefield"],
        ["Academy", "academu"],
        ["Magic Lab", "lab"],
        ["Quests", "quests"],
        ["?", "?"]
    ]},
    {name: "World", links: [
        ["World Map", "map"],
        ["Explore", "explore"],
        ["Encyclopedia", "lore"],
        ["Travel Log", "travel"],
        ["Seasonals", "season"],
        ["Monster Hunt", "battle"],
        ["?", "?"],
        ["?", "?"]
    ]},
    {name: "Islands", links: [
        ["My Islands", "islands"],
        ["Patrol", "patrol"],
        ["Fortress", "fortress"],
        ["Gardens", "garden"],
        ["Workshops", "workshops"],
        ["Library", "library"],
        ["Menagerie", "menageria"],
        ["Wardrobe", "wardrobe"]
    ]},
    {name: "Business", links: [
        ["Activity", "activity"],
        ["Inventory", "inventory"],
        ["Market", "market"],
        ["Mythic Sales", "sales"],
        ["Item Exchange", "exchange"],
        ["Errands", "errands"],
        ["Trials", "trials"],
        ["Storage", "storage"]
    ]},
    {name: "Office", links: [
        ["Account", ""],
        ["Messages", ""],
        ["Friends", ""],
        ["Achievements", ""],
        ["Referrals", ""],
        ["Trophies", ""],
        ["?",...