JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='top'>
    Choose a beast to look at. 
    <select id='select-breed'></select> 
    <button id='load-btn'>Go</button>
</div>

<div id='container'>
    
    <div id='breed-intro-section' class='breed-section'>
        <div class='section-title'>
            Bestiary: 
            <span class='breed-name'>[name]</span>
        </div>
        <div id='intro-banner'>[illustration]</div>
        <div id='intro-desc'>[desc]</div>
        <div id='intro-images'>[3/4 smaller images]</div>
    </div>
    
    <!-- Colours available, rarities. -->
    <div id='breed-forms-section' class='breed-section'>
        <div class='section-title'>Recognised Forms</div>
        <p>Every species has some variation in appearance. Some colours, patterns or shapes are more commonly occuring than others - when catching in wild, when breeding and when purchasing. Can you find them all?</p>
        <div id='forms-container'>
            <div id='form-list'>[table]</div>
            <div id='form-preview'>
                <div id='form-sprite'>[sprite]</div>
                <div id='form-desc'>[desc]</div>
            </div>
        </div>
    </div>
    
    <!-- Which items it may randomly produce. -->
    <div id='breed-items-section' class='breed-section'>
        <div class='section-title'>Daily Gifts</div>
        
        <p>When you visit your beast's profile each day, there might be a little present waiting for you! It's also possible for visitors to receive these gifts, after giving your beast some free EXP.</p>
        
        <div id='items-list'></div>
    </div>
    
    <!-- Other breeds it may be crossed with. -->
    <div id='breed-combos-section' class='breed-section'>
        <div class='section-title'>Breeding Combos</div>
        
        <p>Some beasts can only breed with their own kind; others can hybridise with different species, to produce offspring with rare colours or even brand new species.</p>
        
        <div id='combo-list'></div>
    </div>
   ...

CSS

div, img, canvas, button, p, span, table, tr, td, th, input, select {
    box-sizing: border-box;
}

body {
    background-image: url("https://wallup.net/wp-content/uploads/2016/05/24/371952-landscape.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-color: silver;
    color: rgba(0, 0, 0, 0.75);
}

#top {
    width: 400px;
    margin: 20px auto;
    text-align: center;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 5px 10px;
}

#container {
    width: 800px;
    margin: 10px auto 40px auto;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 2px;
}

.breed-section {
    background-color: #fff;
    border: 1px solid silver;
    border-radius: 2px;
    margin: 15px auto;
    padding: 5px 10px 10px 10px;
}
.breed-section .section-title {
    font-size: 25px;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid silver;
}


/* INTRO */

#intro-banner {
    width: 100%;
    height: 200px;
    border: 1px solid rgba(0, 0, 0, 0.8);
}
#intro-banner img {
    width: 100%;
    height: 100%;
}
#intro-desc {
    margin: 15px auto;
}
#intro-images {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
}
#intro-images .intro-image {
    width: 180px;
    height: 160px;
    border: 1px solid rgba(0, 0, 0, 0.8);
}
#intro-images .intro-image img {
    width: 100%;
    height: 100%;
}


/* FORMS - colours, alternative sprites. */

#forms-container {
    display: flex;
    justify-content: space-between;
}
#form-list {
    min-height: 160px;
}
#form-list table {
    width: 400px;
}
#form-list table td {
    width: 50%;
    border: 1px solid silver;
    background-color: #eee;
}
#form-list table td:hover {
    cursor: pointer;
    background-color: #fff;
}
#form-list table span.form-name {
    padding: 2px 5px;
}
#form-list table  span.form-chance {
    float:...

JavaScript

const db = {
    
    /*
    * Species of beast.
    */
    breeds: [
        {
            id: 1, name: "Mirrorflight Griffin",
            desc: "Write stuff here...",
            // Temp
            banner: "https://i.ytimg.com/vi/f27Ih8KidVA/maxresdefault.jpg",
            images: [
                {
                    url: "https://live.staticflickr.com/8866/28855670076_bc4f757f0a_n.jpg",
                    desc: "They fly at high speeds."
                },{
                    url: "https://live.staticflickr.com/5560/14866166036_229f9b2738.jpg",
                    desc: "Some description here."
                },{
                    url: "https://i.pinimg.com/originals/8e/12/8d/8e128da7e571e1c650a94b3604342078.jpg",
                    desc: "Glass feathers, uh, shiny, yeah."
                },{
                    url: "https://www.wildwhispersafrica.com/wp-content/uploads/2014/08/shoebill2.jpg",
                    desc: "A small flock gleaming amongst the clouds."
                }
            ]
        },
        {
            id: 2, name: "Carriage Unicorn",
            desc: "Lorum ipsum hoofy stomp amet...",
            banner: "https://www.experiencedays.co.uk/images/Horse-Carriage-Drive-1920x1080-resize.jpeg",
            images: [
                {
                    url: "https://i.pinimg.com/originals/0e/68/ee/0e68ee3274921875f3af1c1ff39db356.jpg",
                    desc: "Strong enough to pull a great weight."
                },{
                    url: "https://i.pinimg.com/474x/cb/cf/27/cbcf27859b1ce9c2966381054f079a99--horses.jpg",
                    desc: "They're also good for riding and dressage."
                },{
                    url: "https://savingslifestyle.com/wp-content/uploads/2011/12/Lebanon-Horse-Carriage-Parade.jpg",
                    desc: "Two unicorns wearing decorated bridles."
                },{
                    url:...