JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Sketch > Line > Flat (colour filled in) > Shaded > Mark (markings/patterns drawn)
<br>
Image sizes. Adult: 620 x 460  ---  Adolescent: 0 x 0  ---  Young: 420 x 350
<br>
<div id='art-container'></div>
<p>
<select id='select-breed'></select>
<select id='select-stage'>
    <option value='1'>Newborn</option>
    <option value='2'>Young</option>
    <option value='3'>Adolescent</option>
    <option value='4'>Adult</option>
    <option value='5'>Grand</option>
</select>
</p>
<div id='outline'></div>

CSS

div, table, th, td, img, button {
    box-sizing: border-box;
}

table {
    width: 100%;
    border-collapse: collapse;
}
table th {
    border: 1px solid silver;
    background-color: silver;
}
table td {
    border: 1px solid silver;
    padding: 3px 5px;
}

JavaScript

let url = "https://milcote.net/images/msun/breeds/";

const breeds = [
    {
        id: 1, name: "Unicorn", type: "Equine",
        art: ["-", "-", "-", "Flat", "Sketch", "Lining"]
    },{
        id: 2, name: "Pegasus", type: "Equine",
        art: ["Sketch", "Sketch", "-", "Sketch", "Sketch", "-"]
    },{
        id: 3, name: "Griffin", type: "Griffin",
        art: ["-", "-", "-", "Lining", "Sketch", "-"]
    },{
        id: 4, name: "(M) Minoan Griffin", type: "Griffin",
        art: ["Sketch", "Sketch", "Sketch", "Lining", "Lining", "-"]
    },{
        id: 4, name: "(F) Minoan Griffin", type: "Griffin",
        art: ["Sketch", "Sketch", "Sketch", "Sketch", "Sketch", "-"]
    },{
        id: 5, name: "Marlik Griffin", type: "Griffin",
        art: ["Flat", "Flat", "Flat", "Flat", "Flat", "-"]
    },{
        id: 6, name: "Achaemenid Griffin", type: "Griffin",
        art: ["Sketch", "Sketch", "Sketch", "Sketch", "Sketch", "-"]
    },{
        id: 7, name: "Nimrud Griffin", type: "Griffin",
        art: ["Flat", "Flat", "Flat", "Flat", "Flat", "-"]
    },{
        id: 8, name: "? Vanavi Griffin", type: "Griffin",
        art: ["-", "-", "-", "-", "-", "-"]
    },{
        id: 9, name: "Valravn", type: "Canine",
        art: ["-", "-", "-", "Flat", "Flat", "-"]
    },{
        id: 10, name: "Hippogriff", type: "Equine",
        art: ["-", "-", "Sketch", "Sketch", "-", "-"]
    },{
        id: 11, name: "Hippocamp", type: "Equine",
        art: ["-", "-", "-", "-", "-", "-"]
    },{
        id: 12, name: "Thracian Pegasus", type: "Equine",
        art: ["Flat", "Flat", "-", "Flat", "Flat", "-"]
    },{
        id: 13, name: "(M) Minavi Griffin", type: "Griffin",
        art: ["Flat", "Flat", "Flat", "Flat", "Flat", "-"]
    },{
        id: 13, name: "(F) Minavi Griffin", type: "Griffin",
        art: ["Flat", "Flat", "Flat", "Flat", "Flat", "-"]
    },{
        id: 14, name: "? Cervana", type: "Cervine",
        art: ["Sketch", "Sketch", "Sketch", "Sketch",...