JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Mythscale palettes.
<ul>
    <li>Need a large clear gap between the two eye palettes. They're both 3x3.</li>
    <li>Anything else that could look prettier/sleeker?</li>
</ul>

<div class='section'>
    <div class='title'>Base and Accent Colours</div>
    <table id='table_bright'></table>
    <div id='colour_bright'></div>
    <p>Over a hundred colours can be seen on the scales, skin or horns of dragons. Gold is the most natural, and up to 2 doses of red or 4 doses of blue pigment can cause many more. Five shades are available, and some dragons carry a mutation that makes their colours muted, compared to their more vivid counterparts. Oh, and some can be shades of grey, too.</p>
    <table id='table_dull'></table>
    <div id='colour_dull'></div>
    <p>Many dragons display two colours, on different parts of the body. This is because they actually carry an additional set of genes, which are inherited independently from the main set. This extra, optional colour is called the Accent, while all dragons have a Base colour. Can you breed or find dragons with attractive Base/Accent combos?</p>
</div>

<div class='section'>
    <div class='title'>Eye Colours</div>
    <div class='flex'>
        <div class='half'>
           <table id='table_eye' class='table_3'></table>
        </div>
        <div class='half'>
            <table id='table_pastel' class='table_3'></table>
        </div>
    </div>
    <div id='colour_eye'></div>
    <p>Dragons are known to have many iris colours, with Amber being the most natural, and the addition of red and/or blue pigment creating 8 more. The Pastel mutation will cause any colour to become paler (see second table), while Melanism can cause black, grey or silver eyes, and others such as albinism or merle can cause pink, blue or white. Some dragons have two colours in the same eye, and many dragons have eye colour showing somewhere on their bodies too.</p>
</div>

<!-- Doing this one manually because tricky CSS class names -->
<div...

CSS

table {
    width: 100%;
    height: 100%;
}

table td {
    height: 30px;
    transition: 0.2s;
}

table td:hover {
    cursor: pointer;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3) inset;
    transition: 0.2s;
}

.table_3 td {
    width: 33.33%;
}
.table_4 td {
    width: 25%;
}
.table_5 td {
    width: 20%;
}


.section {
    padding: 1em;
    border: 1px solid silver;
    margin: 10px auto;
}

.section .title {
    text-align: center;
    font-size: 25px;
    margin: 0px auto 10px;
    font-weight: bold;
}

.flex {
    display: flex;
    flex-flow: row wrap;
}
.half {
    width: 50%;
}

.selected_colour {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.4) inset;
    transition: 0.2s;
}

.swatch_small {
    width: 30px;
    height: 30px;
    display: inline-block;
}

#colour_bright, #colour_dull, #colour_eye, #colour_melanin {
    text-align: center;
    margin: 10px auto;
}

/* EYE COLOURS */
.c_e_a {background-color:#FDAF0F;}
.c_e_b {background-color:#A0671B;}
.c_e_r {background-color:#D60E03;}
.c_e_g {background-color:#30AD33;}
.c_e_t {background-color:#28C4B4;}
.c_e_m {background-color:#CD21F8;}
.c_e_z {background-color:#0CD8FC;}
.c_e_i {background-color:#3F48CC;}
.c_e_v {background-color:#8D37BB;}

.c_e_y {background-color:#FEDE01;}
.c_e_h {background-color:#DC8B3A;}
.c_e_l {background-color:#FE7272;}
.c_e_o {background-color:#AEF86B;}
.c_e_n {background-color:#71FBE7;}
.c_e_p {background-color:#EAA3FC;}
.c_e_s {background-color:#BDE4EC;}
.c_e_f {background-color:#9A9FE4;}
.c_e_w {background-color:#C9A5FA;}


.c_white { background-color: #FFFFFF; }
.f_white { filter: invert(100%); }

.c_black_1 { background-color: #DFDFDF; }
.c_black_2 { background-color: #B0B0B0; }
.c_black_3 { background-color: #7E7E7E; }
.c_black_4 { background-color: #4F4F4F; }
.c_black_5 { background-color: #282828; }

.f_black_1 { filter: invert(86%); }
.f_black_2 { filter: invert(64%); }
.f_black_3 { filter: invert(44%); }
.f_black_4 { filter: invert(28%); }
.f_black_5 { filter:...

JavaScript

const eyeNames = [
    ["Amber", "Brown", "Red"],
    ["Green", "Turquoise", "Magenta"],
    ["Azure", "Indigo", "Purple"]
]
const pastelNames = [
    ["Yellow", "Hazel", "Coral"],
    ["Mint", "Cyan", "Pink"],
    ["Powder Blue", "Cornflower Blue", "Periwinkle"]
];
const eyePalette = [
    ["a", "b", "r"],
    ["g", "t", "m"],
    ["z", "i", "v"]
]
const pastelPalette = [
    ["y", "h", "l"],
    ["o", "n", "p"],
    ["s", "f", "w"]
];


const brightNames = [
    ["Powder Pink", "Salmon", "Cherry", "Ruby", "Cranberry"],
    ["Shell", "Peach", "Chestnut", "Copper", "Walnut"],
    ["Vanilla", "Topaz", "Gold", "Honey", "Mustard"],
    ["Gooseberry", "Pear", "Peridot", "Olive", "Dark Olive"],
    ["Honeydew", "Mint", "Meadow", "Emerald", "Forest"],
    ["Celeste", "Aquamarine", "Turquoise", "Myrtle", "Peacock"],
    ["Powder Blue", "Sky", "Azure", "Cerulean", "Imperial Blue"],
    ["Crystal", "Cornflower", "Royal Blue", "Indigo", "Lapis Lazuli"],
    ["Lilac", "Wysteria", "Amethyst", "Royal Purple", "Midnight"],
    ["pur1", "pur2", "pur3", "pur4", "pur5"],
    ["Dawn", "Rose", "Magenta", "Amaranth", "Byzantium"]
];

const dullNames = [
    ["Misty Rose", "Blush", "Russet", "Rose Vale", "Mahogany"],
    ["Almond", "Toast", "Coffee", "Umber", "Chocolate"],
    ["Cream", "Champagne", "Caramel", "Grullo", "Bistre"],
    ["Ivory", "Khaki", "Lichen", "Moss", "Dark Moss"],
    ["Mint Cream", "Celadon", "Fern", "Ivy", "Jungle"],
    ["Seafoam", "Duck Egg", "Verdigris", "Viridian", "Storm"],
    ["Blizzard", "Frost", "Ocean", "Cerulean", "Twilight"],
    ["Snow", "Cloud", "Slate", "Blueberry", "Cosmos"],
    ["Mist", "Lavender", "Violet", "Orchid", "Blackberry"],
    ["pur1", "pur2", "pur3", "pur4", "pur5"],
    ["Rose Quartz", "Thistle", "Heather", "Mulberry", "Raisin"]
];

const greyNames = ["Platinum", "Silver", "Steel", "Thunder", "Iron"];


const palette = [
    ["y", "o", "g", "t", "b"],
    ["a", "m", "p", "v", "i"],
    ["r", "m", "p", "v", "i"]
];




/*
   ...