JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='container'>

    <div id='top-menu-buttons'>
        <div id='tm-button-index' class='tm-button' data-box='index'>Index</div>
        <div id='tm-button-mammal' class='tm-button' data-box='mammal'>Mammal</div>
        <div id='tm-button-bird' class='tm-button' data-box='bird'>Bird</div>
        <div id='tm-button-reptile' class='tm-button' data-box='reptile'>Reptile</div>
        <div id='tm-button-fish' class='tm-button' data-box='fish'>Fish</div>
        <div id='tm-button-invert' class='tm-button' data-box='invert'>Invertebrate</div>
        <div id='tm-button-plant' class='tm-button' data-box='plant'>Plant</div>
    </div>

    <!-- These appear when buttons are clicked. -->
    <!-- All are positioned. -->
    <div id='top-menu-boxes'>
    
        <div id='tm-box-index' class='tm-box'>
            <div class='tm-box-title'>
                <a href=''>Index</a>
            </div>
            <div class='tm-box-hr'></div>
            <div class='tm-box-links'>
            
                <div class='tm-box-link'>
                    <div class=''></div>
                    <a href='tutorial'>Genetic tutorial</a>
                </div>
                <div class='tm-box-link'>
                    <img src='about.gif'>
                    <a href='about'>Mutation table</a>
                </div>
                <div class='tm-box-link'>
                    <img src='about.gif'>
                    <a href='about'>Pigment list</a>
                </div>
                <div class='tm-box-link'>
                    <img src='about.gif'>
                    <a href='about'>Pathway list</a>
                </div>
                <div class='tm-box-link'>
                    <img src='about.gif'>
                    <a href='about'>Interviews</a>
                </div>
                <div class='tm-box-link'>
                    <img src='about.gif'>
                    <a href='about'>About</a>
                </div>
                
            </div>
 ...

CSS

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

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

/* umm */
#top-menu-buttons {
    width: 100%;
    height: 50px;
    background-color: grey;
    position: relative;
}
#top-menu-buttons .tm-button {
    position: absolute;
    top: 5px;
    width: 90px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border: 1px solid silver;
    border-radius: 2px;
    transition: 0.2s;
}
#top-menu-buttons .tm-button:hover {
    cursor: pointer;
    background-color: silver;
    transition: 0.2s;
}
#top-menu-buttons .active-button {
    background-color: silver;
}

/* Position and size buttons exactly. */
#tm-button-index {
    left: 100px;
}
#tm-button-mammal {
    left: 200px;
}
#tm-button-bird {
    left: 300px;
}
#tm-button-reptile {
    left: 400px;
}
#tm-button-fish {
    left: 500px;
}
#tm-button-invertebrate {
    left: 600px;
}
#tm-button-plant {
    left: 700px;
}

/* These appear after a button is clicked. */
#top-menu-boxes {
    position: relative;
    width: 100%;
    height: 10px;
    border: 1px dashed blue;
}
#top-menu-boxes .tm-box {
    display: none;
    position: absolute;
    top: 5px;
    min-width: 100px;
    min-height: 60px;
    padding: 10px;
    background-color: grey;
}
#top-menu-boxes .tm-box .tm-box-divider {
    width: 100%;
    height: 2px;
    background-color: silver;
}
#top-menu-boxes .tm-box .tm-box-title {
    font-size: 22px;
    color: #fff;
    padding-bottom: 7px;
    border-bottom: 2px solid silver;
    margin-bottom: 5px;
}
#top-menu-boxes .tm-box .tm-box-links {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    border: 1px dashed silver;
}
#top-menu-boxes .tm-box .tm-box-link {
    width: 150px;
    height: 30px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    border: 1px dotted silver;
    font-size: 14px;
}
#top-menu-boxes...

JavaScript

let sections = [
    
    {
        button: "Home",
        indexUrl: "",
        indexText: "Home page",
        links: [
            {
                text: "Tutorial", url: "intro",
                top: 0, left: 0, icon: 1
            },{
                text: "Comparison", url: "comparison",
                top: 0, left: 0, icon: 2
            },{
                text: "Pigments", url: "pigments",
                top: 0, left: 0, icon: 3
            },
            {
                text: "Pathways", url: "pathways",
                top: 0, left: 0, icon: 4
            },
            {
                text: "Articles", url: "articles",
                top: 0, left: 0, icon: 5
            },
            {
                text: "Interviews", url: "interviews",
                top: 0, left: 0, icon: 6
            }
        ]
    },
    {
        button: "Mammal",
        indexUrl: "mammal",
        indexText: "Mammal index",
        links: [
            {
                text: "Cat", url: "cat",
                top: 0, left: 0, icon: 7,
            },{
                text: "Dog", url: "dog",
                top: 0, left: 0, icon: 8
            },{
                text: "Fox", url: "fox",
                top: 0, left: 0, icon: 9
            },{
                text: "Horse", url: "horse",
                top: 0, left: 0, icon: 10
            },{
                text: "Donkey", url: "donkey",
                top: 0, left: 0, icon: 11
            },{
                text: "Cow", url: "cow",
                top: 0, left: 0, icon: 12
            },{
                text: "Sheep", url: "sheep",
                top: 0, left: 0, icon: 13
            },{
                text: "Goat", url: "goat",
                top: 0, left: 0, icon: 14
            },{
                text: "Pig", url: "pig",
                top: 0, left: 0, icon: 15
            },{
                text: "Yak", url: "yak",
                top: 0, left: 0, icon: 16
            },{
                text:...