JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='container'>

    <div id='logo'>
        <a href='../../index'><img src='https://orig00.deviantart.net/1c2b/f/2018/083/0/1/whlogo2_by_bronzehalo-dc6sqvn.png'></a>
    </div>
    
    <!-- HEADER -->
    <div id='header'>
        Header
    </div>

    <!-- NAV BAR -->
    <!-- Dropdown menus. On mobile, becomes vertical. -->
    <div id='navbar'>
        <!--<div id='navbar_mobile'>[MENU]</div>-->
        <ul id='navbar-content'></ul>
    </div>
    
    <!-- PAGE CONTENT -->
    <div id='page'>
        Page content goes here. Big images will shrink to fit this width.
        
    </div>
    
    <!-- FOOTER -->
    <div id='footer'>
        Footer 
    </div>
    
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Galdeano');

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

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Galdeano', sans-serif;
    color: rgba(0, 0, 0, 0.8);
}

body {
    background-image: url("https://tse3.mm.bing.net/th?id=OIP.GXRdDyeZZt-B1ZsMLIYDTwHaEl&pid=Api");
    background-size: cover;
    background-attachment: fixed;
}

a {
    text-decoration: none;
}

#container {
    width: 1000px;
    margin: 20px auto;
}

/* Boring. Need snazzy layout later */
#logo {
    margin: 20px auto;
    width: 200px;
    height: 100px;
}
#logo img {
    height: 100px;
    width: auto;
}

#header, #footer {
    padding: 5px;
    background-color: #fff;
}



/* top menu for navigation */ 
#navbar {
    margin: 15px auto;
    z-index: 2;
}

#navbar-content {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
}

/* First 8 links */
#navbar-content .navbar-li {
    padding: 5px;
    border: 1px solid black;
    background-color: #aaa;
    width: 12%;
    position: relative;
    text-align: center;
    transition: 0.2s;
    cursor: pointer;
}

/*
* Don't apply this to the li already open.
* When hovering over its ul options, keep it white.
*/
#navbar-content .navbar-li:not(.navbar-active-li):hover {
    transition: 0.2s;
    background-color: #ccc;
}

#navbar-content .navbar-active-li {
    background-color: #fff;
    transition: 0.2s;
}

/*
* Second layer: uls inside the lis.
* These contain lis with actual links.
*/
#navbar-content .navbar-ul {
    list-style-type: none;
    width: 150px;
    border: 1px solid #aaa;
    border-top: #fff;
    background-color: #fff;
    padding: 5px;
    position: absolute;
    top: calc(100% + 1px);
    left: calc(50% - 75px);
}

#navbar-content .navbar-ul li {
    display: block;
    width: 100%;
    padding: 5px;
   ...

JavaScript

let navbarOpen = false, // mobile only
    navbarLi = 0, // current one open
    menuOpen = false; // any menu

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",...