JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Game navigation menu, navbar.

<link href='https://fonts.googleapis.com/css?family=Almendra' rel='stylesheet'>

<div id='container'>

    <div id='navigation'></div>

</div>

CSS

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

body {
    font-family: 'Almendra', sans-serif;
    color: #270d66;
    font-size: 18px;
}
body a {
    color: #270d66;
    text-decoration: none;
}

#container {
    width: 95%;
}

#navigation {
    margin: 20px auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    padding: 5px;
    width: 100%;
    background-color: lightblue;
    border-radius: 5px;
}

#navigation .nav_section {
    position: relative;
    width: 100px;
    border: 1px solid #753899;
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
    background-color: #9464af;
    text-align: center;
}

#navigation .nav_section:hover {
    background-color: #b58ace;
    transition: 0.2s;
}

#navigation .nav_section a:hover {
    color: white;
    transition: 0.2s;
}

#navigation .nav_section:hover .nav_ul {
    display: block;
}

/* Ul with border, and arrow at top */
.nav_ul {
    display: none;
    position: absolute;
    padding: 0px;
    top: 13px;
    left: -40px;
    z-index: 3;
    min-width: 150px;
    min-height: 150px;
    max-height: 250px;
    background-color: none;
    border: 1px solid black;
    border-radius: 5px;
    border-style: solid;
    border-width: 21px 13px 15px 11px;
    border-image: url("https://orig00.deviantart.net/29db/f/2018/180/0/9/tinytestarrow_by_bronzehalo-dcfrl0h.png") 21 13 15 11 fill round round;
}



/* use sprite sheet for icons. When a li is hovered, shift coords */
.nav_icon {
    width: 20px;
    height: 25px;
    display: inline-block;
    vertical-align: middle;
    background: url("https://i.stack.imgur.com/GixhT.png") no-repeat left top;
}

.nav_ul li:hover .nav_icon {
     background-position: -25px 0px;
 }

.nav_text {
    display: inline-block;
    margin-left: 10px;
}

.nav_ul li {
    list-style: none;
    display: block;
    margin: 3px;
    padding: 5px;
    height: 20px;
    width: 145px;
    text-align: left;
    border: 1px solid #753899;
   ...

JavaScript

const navbar = [
    {
        name: "Home", url: "",
        links: [
            {name: "News", url: "news"},
            {name: "Forum", url: "forum"},
            {name: "Help Guide", url: "guide"},
            {name: "Directory", url: "directory"},
            {name: "Gallery", url: "gallery"}
        ]
    },{
        name: "My Flock", url: "flock",
        links: [
            {name: "Overview", url: "overview"},
            {name: "Breeding", url: "breeding"},
            {name: "Incubation", url: "incubation"},
            {name: "Rescue", url: "rescue"}
        ]
    },{
        name: "Challenge", url: "challenge",
        links: [
            {name: "Arena", url: "arena"},
            {name: "Training", url: "training"},
            {name: "Trials", url: "trials"},
            {name: "Rankings", url: "rankings"},
            {name: "Battlefield", url: "battlefield"}
        ]
    },{
        name: "Explore", url: "explore",
        links: [
            {name: "World Map", url: "map"},
            {name: "My Quests", url: "quests"},
            {name: "...", url: "guide"},
            {name: "...", url: "tutorial"}
        ]
    },{
        name: "My Islands", url: "islands",
        links: [
            {name: "Patrol", url: "patrol"},
            {name: "Gardening", url: "garden"},
            {name: "Workshops", url: "workshops"}
        ]
    },{
        name: "Business", url: "business",
        links: [
            {name: "Inventory", url: "inventory"},
            {name: "Market", url: "market"},
            {name: "Pet Sales", url: "sales"},
            {name: "Item Exchange", url: "exchange"},
            {name: "Bank", url: "bank"}
        ]
    },{
        name: "My Account", url: "account",
        links: [
            {name: "Activity", url: "activity"},
            {name: "Messages", url: "messages"},
            {name: "Wardrobe", url: "wardrobe"},
            {name: "Friends", url: "friends"},
            {name: "Achievements", url:...