JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<h2>Syrian</h2>
<div id='overview_table1'></div>

<h2>Roborovski dwarf</h2>
<div id='overview_table2'></div>

<h2>Winter white dwarf</h2>
<div id='overview_table3'></div>

<h2>Campbell's dwarf</h2>
<div id='overview_table4'></div>


Hamsters are complicated. The common, large type of pet hamster is the Syrian. Then there are 4 dwarf types, all slightly different to each other, with their own colour/fur mutations, sometimes using the same names... and occasionally interbred, producing hybrids. These hybrids are not always labelled properly. Argh!

<ul>
    <li><b>Syrian (Mesocricetus auratus)</b><br>
    Also called Golden</li>

    <li><b>Winter White dwarf (Phodopus sungorus)</b><br>
    Also called Russian dwarf, Russian Winter White, Djungarian, Striped dwarf, Siberian hamster</li>

    <li><b>Campbell's dwarf (Phodopus campbelli)</b><br>
    Also called Russian dwarf, Russian Campbell's, Djungarian, Campbell's desert hamster</li>

    <li><b>Roborovski dwarf (Phodopus roborovskii)</b><br<
    Also called Robo, Desert hamster</li>

   <li><b>Chinese (Cricetulus griseus)</b><br<
   Not included here yet. They only have 3 colour varieties, a very limited range.</li>
</ul>




http://hamsterhideout.com/forum/topic/75398-quick-guide-to-the-five-species-of-domestic-hamster/

https://www.rodentzone.com/winter-white-dwarf-hamsters-genetics-glossary/


--- Winter white dwarf hamster (Phodopus sungorus)

"The winter white dwarf hamster , also known as the Russian dwarf hamster, Djungarian hamster, striped dwarf hamster, Siberian hamster, or Siberian dwarf hamster"

"These hamsters have the ability to change color from dark grey to white during winter time in the wild, hence the name – Winter White. In the domestic environment, they don’t turn white because of the artificial conditions of light and heating in the...

CSS

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

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

JavaScript

let hamsterTables = [
    [ // Syrian
        {
            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."}
            ]
        }
    ],
    // Roborovski
    [
        {
            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."}
            ]
        }
    ],
    // Winter white
    [
        {
            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: "Sapphire", code: "S",
            alleles: [
                {code: "S+", info: "Wildtype. Eumelanin is produced in black colour."},
                {code: "s", info: "Sapphire colour. Eumelanin is diluted to blue-grey colour."}
            ]
        }
    ],
    // Campbell's
    [
        {
            name: "Agouti",...