JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<p>Alleles are listed in order of dominance. A locus can have several alleles that are recessive to the wildtype (+) but still dominant over each other. For example, <b>choc</b> is dominant over <b>cin</b>, so a griffin carrying <b>choc/choc</b> or <b>choc/cin</b> will appear chocolate. Only <b>cin/cin</b> will appear cinnamon.</p>

<p>Some alleles are <span class='allele-risky'>risky</span> if homozygous (two copies are carried). There's a chance that the embryo won't develop properly, and the egg won't hatch. Check each allele to see what the chances are, and be careful not to breed two carriers together.</p>

<div id='info-griffin'></div>

<hr>

<div id='info-dragon'></div>

<hr>

<div id='info-equine'></div>

CSS

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

.allele {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    padding: 2px 5px;
}
.allele-risky {
    background-color: lightpink;
    color: darkred;
}

JavaScript

const data = {

griffin: {
    groups: [
        {id: 1, name: "Avian genes"},
        {id: 2, name: "Genes borrowed from other animals"},
        {id: 3, name: "Fantasy genes"}
    ],
    loci: [
        {
            symbol: "e", group: 1,
            name: "Extension of Black",
            wt: "E+", chro: "",
            alleles: [
                {
                    symbol: "E^d", name: "Extended Black", 
                    desc: "The entire body produces eumelanin. Not affected by Agouti."
                },
                {
                    symbol: "E^t", name: "Tortie", 
                    desc: "One copy causes random black patches. Two copies cause the whole body to be black. Not affected by Agouti."
                },
                {
                    symbol: "E+", name: "Wildtype", 
                    desc: "Some eumelanin is produced. Agouti locus may modify where."
                },
                {
                    symbol: "e^b", name: "Birchen", 
                    desc: ""
                },
                {
                    symbol: "e^w", name: "Wheaten", 
                    desc: ""
                },
                {
                    symbol: "e", name: "Recessive Red", 
                    desc: "No eumelanin can be produced."
                }
            ]
        },
        {
            symbol: "a", group: 2,
            name: "Agouti",
            wt: "A+", chro: "",
            alleles: [
                {
                    symbol: "A^y", name: "Yellow", 
                    risky: true,
                    desc: "Lethal if homozygous. ASIP gene expression is ramped up, eliminating eumelanin all over the body."
                },
                {
                    symbol: "A+", name: "Wildtype", 
                    desc: "Some eumelanin is switched off, creating a natural pattern."
                },
                {
                    symbol: "a", name: "Non-agouti", 
                    desc: "No...