JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cabin">

<button onclick='copyHTML()'>COPY</button>
<textarea id='copy_result' style='width:100%;height:150px;'></textarea>

collecting links, gene info.

<div id='copy_this'>

<div id='locus-buttons'>[Loading buttons here...]</div>

<div class='locus_content' id='locus_e'>
    <div class='locus_intro'></div>
    
    <div class='locus_tab tab_photos'>photos...</div>
    <div class='locus_tab tab_images'>images...</div>
    <div class='locus_tab tab_description'>text...</div>
    <div class='locus_tab tab_sources'>papers etc...</div>
    <div class='locus_tab tab_other'>papers etc...</div>
</div>

<div class='locus_content' id='locus_co'>
    <div class='locus_intro'></div>
    
    <div class='locus_tab tab_photos'>photos...</div>
    <div class='locus_tab tab_images'>images...</div>
    <div class='locus_tab tab_description'>text...</div>
    <div class='locus_tab tab_sources'>papers etc...</div>
    <div class='locus_tab tab_other'>papers etc...</div>
</div>

<div class='locus_content' id='locus_db'>
    <div class='locus_intro'></div>
    
    <div class='locus_tab tab_photos'>photos...</div>
    <div class='locus_tab tab_images'>images...</div>
    <div class='locus_tab tab_description'>text...</div>
    <div class='locus_tab tab_sources'>papers etc...</div>
    <div class='locus_tab tab_other'>papers etc...</div>
</div>

<div class='locus_content' id='locus_pg'>
    <div class='locus_intro'></div>
    
    <div class='locus_tab tab_photos'>photos...</div>
    <div class='locus_tab tab_images'>images...</div>
    <div class='locus_tab tab_description'>text...</div>
    <div class='locus_tab tab_sources'>papers etc...</div>
    <div class='locus_tab tab_other'>papers etc...</div>
</div>

<div class='locus_content' id='locus_ml'>
    <div class='locus_intro'></div>
    
    <div class='locus_tab tab_photos'>photos...</div>
    <div class='locus_tab tab_images'>images...</div>
    <div...

CSS

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

.hidden {
    display: none;
}

html, body {
    color: rgba(0, 0, 0, 0.7);
    font-family: 'Cabin', sans-serif;
}

a {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.7);
}

a:hover {
    color: rgba(0, 0, 0, 1);
}

.locus_content, .locus_content .locus_tab {
    display: none;
}

#locus-buttons {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

#locus-buttons .locus-button {
    border-radius: 5px;
    background-color: silver;
    margin: 5px;
    padding: 2px 8px;
    width: 160px;
    transition: 0.2s;
    display: flex;
    align-items: center;
    font-size: 14px;
}

#locus-buttons .locus-button span:nth-child(1) {
    font-size: 20px;
    margin-right: 10px;
    vertical-align: center;
}

#locus-buttons .locus-button span:nth-child(2) {
    display: table;
    margin: 0 auto;
}

#locus-buttons .locus-button:hover {
    cursor: pointer;
    opacity: 0.8;
    transition: 0.2s;
}

/*
* Contains title, short summary, and buttons.
* Style changes to match current locus' colours.
*/
.locus_intro {
    padding: 15px;
    border-radius: 10px;
    text-align: center;
}

.locus_title {
    font-size: 30px;
    font-weight: bold;
}

.locus_tabs .button {
    display: inline-block;
    margin: 0px 5px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 5px;
    padding: 8px;
    transition: 0.3s;
}

.locus_tabs .button:hover {
    cursor: pointer;
    opacity: 0.7;
    transition: 0.3s;
}




.scheme_bl {
    background-color: #9EA5B8;
    background-image: linear-gradient(to right, #717282, #C5C6D4);
}
.scheme_mh {
    background-color: #CF614B;
    background-image: linear-gradient(to right, #963B1C, #E3744F);
}
.scheme_lav  {
    background-color: #E0D8E8;
    background-image: linear-gradient(to right, #C6BCD1, #F5E5DA);
}
.scheme_i {
    background-color: #CCB09D;
    background-image: linear-gradient(to right, #9E8875, #D1BDAB);
}

.scheme_s, .scheme_c ...

JavaScript

const data = {
    e: {
        name: "Extension", gene: "MC1R",
        desc: "Controlling",
        alleles: [
            {icon: "E", desc: "Dominant black. Whole bird is black-based."},
            {icon: ">"},
            {icon: "e+", desc: "Wildtype. Partridge pattern."},
            {icon: ">"},
            {icon: "e^b", desc: "Birchen pattern"},
            {icon: ">"},
            {icon: "e^r", desc: "uhh"},
            {icon: ">"},
            {icon: "e^wh", desc: "Wheaten pattern."},
        ]
    },
    co: {
        name: "Columbia", gene: "MC1R",
        desc: "Controlling",
        alleles: [
            {icon: "E", desc: "Dominant black. Whole bird is black-based."},
            {icon: ">"},
            {icon: "e+", desc: "Wildtype. Partridge pattern."},
            {icon: ">"},
            {icon: "e^b", desc: "Birchen pattern"},
            {icon: ">"},
            {icon: "e^r", desc: "uhh"},
            {icon: ">"},
            {icon: "e^wh", desc: "Wheaten pattern."},
        ]
    },
    db: {
        name: "Darkbrown", gene: "MC1R",
        desc: "Controlling",
        alleles: [
            {icon: "E", desc: "Dominant black. Whole bird is black-based."},
            {icon: ">"},
            {icon: "e+", desc: "Wildtype. Partridge pattern."},
            {icon: ">"},
            {icon: "e^b", desc: "Birchen pattern"},
            {icon: ">"},
            {icon: "e^r", desc: "uhh"},
            {icon: ">"},
            {icon: "e^wh", desc: "Wheaten pattern."},
        ]
    },
    pg: {
        name:"Pattern Gene", gene: "MC1R",
        desc: "Controlling",
        alleles: [
            {icon: "E", desc: "Dominant black. Whole bird is black-based."},
            {icon: ">"},
            {icon: "e+", desc: "Wildtype. Partridge pattern."},
            {icon: ">"},
            {icon: "e^b", desc: "Birchen pattern"},
            {icon: ">"},
            {icon: "e^r", desc: "uhh"},
            {icon: ">"},
            {icon: "e^wh", desc: "Wheaten...