JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Comparison table. Click on a cell to get sources (links to scientific papers or websites with more info).
<div id='info_container'></div>
<div id='table_container'></div>

CSS

div, img, button, table, th, td {
    box-sizing: border-box;
}

#table_container table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px auto;
}

#table_container td {
    border: 1px solid silver;
    padding: 5px;
    text-align: center;
}

#table_container .empty {
    border: none;
}

#table_container tr:hover {
    background-color: #eee;
}


.hoverable {
    position: relative;
    cursor: pointer;
}

.hoverbox {
    min-width: 300px;
    max-width: 500px;
	position: absolute;
    top: 150%;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 10px;
	background: white;
	border: 1px solid silver;
	border-radius: 5px;
	font-size: 14px;
	z-index: 40;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
	visibility: hidden;
	opacity: 0;
	/*transition: opacity 0.3s;*/
}
.hoverable:hover .hoverbox {
    visibility: visible;
    opacity: 1;
}
.hoverbox::after, .hoverbox::before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.hoverbox::after {
    border-bottom-color: white;
    border-width: 10px;
    margin-left: -10px;
}
.hoverbox::before {
    border-bottom-color: silver;
    border-width: 12px;
    margin-left: -12px;
}

JavaScript

const animalList = ["mouse","rat","cat","dog","rabbit","ferret","horse","cow","pig","chicken","quail","zfish"];

const geneList = {
    human: [
        {
            gene: "asip", name: "Agouti signaling protein",
            info: ["??"],
            sources: [
                {name: "aa", link: ""}
            ]
        },{
            gene: "mc1r", name: "Ext",
            info: ["??"],
            sources: [
                {name: "aa", link: ""}
            ]
        },{
            gene: "mlph", name: "Melanophilin",
            info: ["??"],
            sources: [
                {name: "aa", link: ""}
            ]
        },{
            gene: "pax3", name: "pax3",
            info: ["??"],
            sources: [
                {name: "aa", link: ""}
            ]
        },{
            gene: "ednrb", name: "Endothelin receptor B",
            info: ["??"],
            sources: [
                {name: "aa", link: ""}
            ]
        },{
            gene: "ednrb2", name: "Endothelin Receptor B2",
            info: ["??"],
            sources: [
                {name: "aa", link: ""}
            ]
        },{
            gene: "tyr", name: "albino",
            info: ["??"],
            sources: [
                {name: "aa", link: ""}
            ]
        },{
            gene: "tyrp1", name: "brown",
            info: ["??"],
            sources: [
                {name: "aa", link: ""}
            ]
        },{
            gene: "mfsd12",  name: "Major facilitator superfamily domain containing 12",
            info: ["Involved in skin pigmentation"],
            sources: [
                {name: "Loci associated with skin pigmentation identified in African populations", link: "https://science.sciencemag.org/content/358/6365/eaan8433"}
            ]
        },{
            gene: "kit", name: "kit",
            info: ["??"],
            sources: [
                {name: "aa", link: ""}
            ]
        },{
            gene: "mitf", name:...