JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Ferret overview
<div id='overview_table'></div>

CSS

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

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

JavaScript

const tableLoci = [
    {
        name: "Agouti", code: "A",
        alleles: [
            {code: "A+", info: "Wildtype. Standard pattern."},
            {code: "a^s", info: "Self pattern. If it weren't for the lighter undercoat, the whole ferret would be solid black/other colour."}
        ]
    },{
        name: "Brown", code: "B",
        alleles: [
            {code: "B+", info: "Wildtype. Eumelanin is produced in black colour."},
            {code: "b", info: "Chocolate. Eumelanin appears deep brown. Also called 'mahogany' in the fur trade, 'socklot' in mink."}
        ]
    },{
        name: "Colour", code: "C",
        alleles: [
            {code: "C+", info: "Wildtype. No changes."},
            {code: "c^p", info: "Champagne/sandy. Also called 'platinum' or 'pastel' in the fur trade."},
            {code: "c", info: "Albino. White with red eyes."}
        ]
    },{
        name: "Dilute", code: "D",
        alleles: [
            {code: "D+", info: "Wildtype. Full pigment strength."},
            {code: "d", info: "Eumelanin diluted to grey (or pale brown if Chocolate), phaeomelanin diluted to cream."}
        ]
    },{
        name: "Extension", code: "E",
        alleles: [
            {code: "E+", info: "Wildtype. Eumelanin can be produced."},
            {code: "e", info: "No eumelanin is produced. Ginger-red 'cinnamon' colour. Also called 'erythristic'."}
        ]
    },{
        name: "Intensity", code: "I",
        alleles: [
            {code: "I+", info: "Wildtype. No changes."},
            {code: "i^p", info: "Point/siamese pattern. Reduces pigmentation to the upper half of hair shaft, resulting in lighter central body/back."}
        ]
    },{
        name: "Spotting", code: "S",
        alleles: [
            {code: "S+", info: "Wildtype. No changes."},
            {code: "s^i", info: "Irish spotting, or 'mitt' as it's known in ferrets. Four white feet, throat bib, possible white on tail/belly/face. <u>Not</u> related to Waardenburg...