JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<h2>Gerbil overview</h2>
<div id='overview_table'></div>

CSS

table {
    border-collapse: collapse;
    width: 100%;
}

table td {
    border: 1px solid silver;
    padding: 5px;
}

JavaScript

let tableLoci = [
    {
        name: "Agouti", code: "A",
        alleles: [
            {code: "A+", info: "Agouti pattern."},
            {code: "a^s", info: "Self pattern. Coat is solidly eumelanin-based."}
        ]
    },{
        name: "Colour", code: "C",
        alleles: [
            {code: "C+", info: "Wildtype."},
            {code: "c^chm", info: "Chinchilla Medium, formerly called Burmese (c^b). Moderate colourpoint effect, with more pigment at the points."},
            {code: "c^h", info: "Himalayan. Stronger than c^chm. Two copies causes white body with pigmented tail."}
        ]
    },{
        name: "Dilute", code: "D",
        alleles: [
            {code: "D+", info: "Wildtype."},
            {code: "d", info: "Black eumelanin fades to blue-grey. Orange phaeomelanin fades to ? cream?"}
        ]
    },{
        name: "Extension", code: "E",
        alleles: [
            {code: "E+", info: "Wildtype. Eumelanin can be produced."},
            {code: "e", info: "Reduced eumelanin. Still black ticking at hair tips, but overall coat much yellower, Honey colour. White underbelly also extends higher up the sides than normal Agouti."},
            {code: "e^f", info: "Extension Fading, or Schimmel. As well as removing more eumelanin (less/no black ticking), orange phaeomelanin is diluted to champagne-like colour."}
        ]
    },{
        name: "Underwhite", code: "Uw",
        alleles: [
            {code: "Uw+", info: "Wildtype."},
            {code: "uw", info: "Phaeomelanin diluted to cream colour. Eumelanin all gone?"},
            {code: "uw^d", info: "Underwhite Dense, formerly called Grey (g). Phaeomelanin strongly diluted, to cream. Eumelanin also diluted a bit."}
        ]
    },{
        name: "Pink-eyed", code: "P",
        alleles: [
            {code: "P+", info: "Wildtype."},
            {code: "p", info: "Eyes are ruby red, eumelanin strongly diluted to grey, phaeomelanin slightly diluted. Argente colour."}
        ]
    },{
     ...