JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='container'>

<div id='header'>
    <div id='header-clock'>[clock]</div>
    <div id='header-time'>18:43</div>
    <div id='header-season'>17th, Falling Rains</div>
    
    <div id='header-user'>...</div>
    
    <div id='navbar'>
        <div id='navbar-content'></div>
    </div>
</div>


<div id='up-container'>
    
    <div class='up-flex-container' style='width: 710px;'>
    
    <div id='up-avatar-container' class='up-section'>
        [dress up]
    </div>
    
    <div id='up-intro' class='up-section'>
        <div id='up-user-basics'>
            <div>Joined: 12 May, 2022</div>
            <div>Seniority: 19 days</div>
            <div>Role: Member/Premium/Moderator/Admin</div>
            <div>Last seen: Today/Yday/This week/Secret ;)</div>
        </div>
        <div id='up-user-status'>
            <div>HP: 60/60</div>
            <div>MP: 25/25</div>
            <div>Beasts: 33/40</div>
        </div>
        <div id='up-user-preferences'>
            <div>Friend requests</div>
            <div>Guild invites</div>
            <div>Accepts beasts</div>
            <div>Accepts items</div>
        </div>
    </div>
    
    </div>
    <!-- Now two 50% sections? -->
    <div class='up-flex-container'>
    
    <div id='up-achievements' class='up-section'>
        <div class='up-section-title'>Achievements</div>
        
        <div>Species seen: 16/120</div>
        <div>Species defeated: 13/120</div>
        <div>Species collected: 13/120</div>
        
        <div>Beasts bred: 4</div>
        <div>Beasts caught: 14</div>
        <div>Beasts crafted: 6</div>
        
        <div>Maps explored: 14/120</div>
        <div>Secrets found: 3/80</div>
        <div>Items found: 47</div>
        
        <div>Objectives completed: 17/300</div>
        <div>Beast errands: 56</div>
        <div>Party errands: 7</div>
        <div>Quests completed: 18</div>
        <div>Contests won: 5</div>
        
        <div>Arena victories: 15</div>
       ...

CSS

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

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

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

#header {
    height: 200px;
    position: relative;
    border: 1px dashed red;
}


#header-clock {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background-color: rgba(255, 255, 255, 0.5);
}
#header-time {
    position: absolute;
    top: 150px;
    left: 0px;
    width: 100px;
    height: 40px;
    background-color: coral;
}
#header-season {
    position: absolute;
    top: 200px;
    left: 0px;
    width: 100px;
    height: 40px;
    background-color: coral;
}

/* top menu for navigation */ 
#navbar {
    width: 800px;
    background-color: coral;
    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%...

JavaScript

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

const navbar = [
    {name: "Home", links: [
        ["News", "news"],
        ["Help & FAQ", "guide"],
        ["Rules", "rules"],
        ["Support Us", "premium"],
        ["Contact Us", "contact"],
        ["Just for fun!", "misc"],
        ["Dev Blog", "dev"],
        ["?", "?"]
    ]},
    {name: "Beasts", links: [
        ["My Beasts", "beasts"],
        ["Breeding", "breeding"],
        ["Free Eggs", "eggs"],
        ["Adoption", "adopt"],
        ["?", "?"],
        ["Memorial", "memorial"],
        ["Retirement", "retirement"]
    ]},
    {name: "Party", links: [
        ["My Class", "classes"],
        ["Party Members", "party"],
        ["Steeds", "steeds"],
        ["Hiring", "hire"],
        ["Customisation", "customise-party"],
        ["...", ""],
        ["...", ""],
    ]},
    {name: "Training", links: [
        ["Arena", "arena"],
        ["Beast Contests", "beast-contests"],
        ["Party Contests", "party-contests"],
        ["Beast Errands", "beast-errands"],
        ["Party Errands", "party-errands"],
        ["...", "...."],
        ["...", "..."],
        ["...", "..."],
        ["?", "?"]
    ]},
    {name: "World", links: [
        ["World Map", "map"],
        ["Portals", "portals"],
        ["Encyclopedia", "lore"],
        ["My Quests", "quests"],
        ["Special Events", "events"],
        ["Minigames", "minigames"],
        ["?", "?"],
        ["?", "?"]
    ]},
    {name: "Business", links: [
        ["Activity Log", "activity"],
        ["Inventory", "inventory"],
        ["Vault", "vault"],
        ["Beast Auctions", "auctions"],
        ["Item Exchange", "exchange"],
        ["Crafting", "crafting"],
        ["...", ""],
        ["...", ""]
    ]},
    {name: "Account", links: [
        ["Preferences", "settings"],
        ["Messages", "messages"],
        ["Friends", "friends"],
        ["Achievements", ""],
        ["Referrals", ""],
       ...