JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

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

<div id='container'>

    <div id='header'>
        <div id='header_left'>
            aaa
        </div>
        <div id='header_right'>
            Animal name
        </div>
    </div>

    <div id='animal_menu'>[ANIMAL ICONS]</div>

    <!-- Begin page. -->
    <div id='page_content'>
    
        <div class='title_1'>title</div>
        <div style='height:600px;'></div>
    
        <textarea id='raw'>........</textarea>
    
    <!-- End #page_content -->
    </div>
    
    <div id='footer'>
        footer...
    </div>

<!-- End #container -->
</div>

CSS

/* Variables. Each animal has own colour scheme, inserted into <head> by PHP, before stylesheets */
:root {
    --animalHeaderText: #FFFFFF;
    --animalMenuBg: rgba(0,0,0,0.6);
    --animalColour1: #BAA47D;
    --animalColour2: #DEC497;
    --animalBgImage: url("https://images.pexels.com/photos/631297/pexels-photo-631297.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260");
}
/*
:root {
    --animalHeaderText: #FFFFFF;
    --animalColour1: #BAA47D;
    --animalColour2: #DEC497;
    --animalNavbarBg: #000000;
}
*/

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

body {
    background-image: var(--animalBgImage);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

html, body {
    color: rgba(0, 0, 0, 0.7);
    font-family: 'Nunito', sans-serif;
}

a {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.7);
}

a:hover {
    color: rgba(0, 0, 0, 1);
}

/* Sets width for everything */
#container {
    width: 90%;
    min-width: 900px;
    max-width: 1000px;
    margin: 30px auto;
}

/* Animal name and large icon */
#header {
    width: max-content; /* Bit dodgy? */
    min-width: 30%;
    max-width: 80%;
    margin: 20px auto;
    text-align: center;
    color: var(--animalHeaderText);
    background-color: var(--animalMenuBg);
    padding: 10px;
    border-radius: 10px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

#header #header_right {
    text-transform: capitalize;
    font-size: 40px;
    padding-left: 20px;
    text-align: center;
}

#header #header_left {
    width: 60px;
    height: 60px;
}

/* Icons here, linking to all animal sections. Icon sheet contains the normal and hover versions. */
#animal_menu {
    width: 100%;
    background-color: var(--animalMenuBg);
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    padding: 10px;
    border-radius: 5px 5px 0px 0px;
}

#animal_menu .menu_icon {
    width: 35px;
    height: 35px;
   ...

JavaScript

const path = "http://milcote.net/genetics/";
const menuLinks = [
    ["cat","Cat"],
    ["dog","Dog"],
    ["rabbit","Rabbit"],
    ["mouse","Mouse"],
    ["rat","Rat"],
    ["hamster","Hamster"],
    ["ferret","Ferret"],
    ["mink","Mink"],
    ["cavy","Guinea pig"],
    ["chinchilla","Chinchilla"],
    ["horse","Horse"],
    ["cow","Cow"],
    ["sheep","Sheep"],
    ["pig","Pig"],
    ["goat","Goat"],
    
    ["chicken","Chicken"],
    ["duck","Duck"],
    ["quail","Quail"],
    ["pigeon","Pigeon"],
    ["barbary","Barbary dove"],
    ["budgie","Budgie"],
    ["cockatiel","Cockatiel"],
    ["zebrafinch","Zebra finch"],
    ["bengalese","Bengalese finch"],
    
    ["goldfish","Goldfish"],
    ["koi","Koi"],
    ["medaka","Medaka"],
    ["zebrafish","Zebrafish"],
    
    ["cornsnake","Corn snake"],
    ["ballpython","Ball python"],
    ["retic","Reticulated python"],
    
    ["plants","Plants"],
    ["griffin","Griffin"],
];

function animalMenu(){
    let html = "";
    let css = "";
    let left = 0;
    for(let a of menuLinks){
        
        css += ".menu_" + a[0] + " {";
        css += "background-position: -" + left + "px 0;";
        css += "}.menu_" + a[0] + ":hover {";
        css += "background-position: -" + left + "px -40px;";
        css += "}";
        
		html += "<a href='" + path + a[0] + "'>";
		html += "<div class='menu_icon menu_" + a[0] + " hoverable'>";
		html += "<div class='hoverbox'>" + a[1] + "</div>";
		html += "</div></a>";
        left += 40;
        
    }
    
    // Add <style> tags to page head.
    let style = document.createElement('style');
    style.appendChild(document.createTextNode(css));
    document.getElementsByTagName('head')[0].appendChild(style);
    
    // Add icons to the menu bar.
    document.getElementById("animal_menu").innerHTML = html;
    
    document.getElementById("raw").value = css;
}

function newMenu(){
    let html = "";
    let css = "";
    let left = 0;
    for(let a of menuLinks){

       ...