JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='biome-grid'></div>
<div id='biome-info'>Click on a grid cell.</div>

CSS

#biome-grid {
    width: 100%;
    line-height: 0px;
}

#biome-grid .biome-cell {
    width: 10%;
    height: 50px;
    box-shadow: 0 0 0 1px #ddd;
    display: inline-block;
    font-size: 10px;
}
#biome-grid .biome-cell:hover {
    cursor: pointer;
    opacity: 0.8;
    box-shadow: 0 0 0 1px #000;
}
#biome-grid .selected-biome {
    box-shadow: 0 0 0 1px #000;
}

#biome-info .images img {
    height: 150px;
    width: auto;
    display: inline-block;
    margin: 5px;
}

JavaScript

const biomeMap = [
    ["tr",  "tr",  "fl"],
    ["tr",  "tr",  "fl",  "sw"],
    ["sr",  "sr",  "vz",  "sw",  "ta"],
    ["sf",  "sf",  "de",  "sw",  "ta",  "ta"],
    ["sv",  "sv",  "de",  "sw",  "ta",  "ta",  "ta"],
    ["sv",  "sv",  "de",  "sw",  "ta",  "ta",  "ta",  "tu"],
    ["sv",  "sv",  "de",  "sw",  "ta",  "ta",  "ta",  "tu",  "tu"],
    ["sv",  "sv",  "de",  "sw",  "ta",  "ta",  "tu",  "tu",  "tu"],
    ["de",  "de",  "de",  "sw",  "ta",  "ta",  "tu",  "tu",  "tu",  "po"],
    ["de",  "de",  "de",  "sw",  "ta",  "ta",  "tu",  "tu",  "po",  "po"]
];

const biomeInfo = {
    tr: { // 1
        name: "Tropical Rainforest", hex: "",
        imgs: [
            "aa"
        ],
        desc: ""
    },
    rs: { // 2
        name: "Tropical swamp", hex: "",
        imgs: [
            "",
            "https://tse2.mm.bing.net/th?id=OIP.GYcpw9RDa7XTHmCtBSjhuQHaE7&pid=Api",
            "https://tse4.mm.bing.net/th?id=OIP.2O46j3LNxCe2-j3zZFRcVQHaE7&pid=Api",
            "https://tse3.mm.bing.net/th?id=OIP.RN8q_VfXNcvpJcV0jc99cQHaE7&pid=Api"
        ],
        desc: "Mangroves, very hot"
    },
    sw: { // 3
        name: "Coniferous swamp", hex: "",
        imgs: [
            "https://tse2.mm.bing.net/th?id=OIP.VqFM4ryhf03TQmuKrynu6wHaE8&pid=Api",
            "https://tse2.mm.bing.net/th?id=OIP.kx42NEj2PUX9C8Mb468AZgHaFj&pid=Api",
            "https://tse4.mm.bing.net/th?id=OIP.fKJmB_b76xFyGh2SHeilEAHaE8&pid=Api",
            "https://tse1.mm.bing.net/th?id=OIP.8Wr4u_Ct6ViAO4lZK64FRQHaE9&pid=Api",
            "https://tse2.mm.bing.net/th?id=OIP._aPuPKf5OyJoOQTf83HiSQHaEo&pid=Api"
        ],
        desc: ""
    },
    fl: { // 4
        name: "Flooded forest", hex: "",
        imgs: [
            "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Morava%27s_flooded_forest_02.jpg/220px-Morava%27s_flooded_forest_02.jpg"
        ],
        desc: "Swampy forest"
    },
    vz: { // 3
        name: "Varzea", hex: "",
        imgs: [
            "aa"
     ...