JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='container'>

<div id='eggs-container'></div>

<div id='hatchery-popup-container'>
    <div id='hatchery-popup-image'></div>
    <div id='hatchery-popup-text'></div>
    <div id='hatchery-popup-close'>[Close]</div>
</div>

</div>

CSS

#eggs-container {
    width: 100%;
    height: 400px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: center;
    background-color: gold;
}
#eggs-container .egg-container {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 20px;
    border: 1px dotted blue;
}
#eggs-container .egg-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

JavaScript

const db = {

    chickColours: [
        "White", "Albino", "Cream", "Yellow", "Tan",
        "Chestnut", "Golden", "Red", "Brown", "Dark Brown",
        "Black", "Silver", "Grey", "Mushroom", "Lavender",
        "Peach", "Slate", "Sunshine", "Bright Sunshine", "Teal",
        "Pearly Black", "Pearly Brown", "Pearly Red", "Pearly Pink", "Pearly White",
        "Indigo", "Violet", "Purple", "Amethyst", "Ruby",
        "Stardust", "Silver Stardust", "Black Stardust", "Blue Stardust", "Green Stardust",
        "Pink Stardust", "White Stardust", "Orange Stardust", "Copper", "Rusty Copper",
        "Redback", "Speckled Brown", "Yellowback", "Sunny", "Blueback",
        "Snowy", "Snowy Blue", "Snowy Silver", "Snowy Black", "Snowy Grey",
        "Snowy Brown", "Snowy Orange", "Rusty Grey", "Copperback", "Porcelain",
        "Isabella", "Red Laced", "Blue Laced", "Silver Laced", "Fire Laced",
        "Black Laced", "Chocolate", "Cinnamon", "Apricot", "Champagne",
        "Burmese", "Ticked", "Tortie", "Dilute Tortie", "Siamese",
        "Mink", "Silver Tortie", "Pearl Tortie", "Piebald Pearl", "Speckled Tortie",
        "Red Tortie", "Blue Tortie", "Piebald", "Tricolour", "Marbled",
        "Silver Marbled", "Peach Marbled", "Yellow Marbled", "Blue Marbled", "Green Marbled",
        "Dark Marbled", "Dark Tortie", "Opal", "Fire Opal", "Blue Opal",
        "Black Opal", "Rainbow Opal", "Rainbow", "Rainbow Laced", "Rainbow Streaked",
        "White Laced", "Sunny Streaked", "Firetipped", "Snowtipped", "Snowface",
        "Masked Red", "Masked White", "Masked Teal", "Masked Lilac", "Masked Copper",
        "Tabby", "Red Tabby", "Golden Tabby", "Grey Tabby", "Blue Tabby",
        "Frost", "Blue Frost", "Copper Frost", "Black Frost", "Red Frost"
    ],

    eggColours: [
        "White", "Cream", "Speckled White", "Speckled Cream", 
        "Brown", "Chocolate", "Speckled Brown", "Speckled Chocolate", 
        "Orange", "Sunshine", "Mahogany", "Ruby",
        "Pale Blue",...