JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<h2>Game art progress</h2>

<div id='tab-buttons'>
    <div class='tab-button active-tab' data-tab='griffin'>Griffin</div>
    <div class='tab-button' data-tab='dragon'>Dragon</div>
    <div class='tab-button' data-tab='horse'>Horse</div>
    <div class='tab-button' data-tab='cat'>Cat</div>
    <div class='tab-button' data-tab='dog'>Dog</div>
    <div class='tab-button' data-tab='bird'>Bird</div>
</div>

<div id='tab-container'>
    <div class='tab-content' id='tab-content-griffin'>
        <div id='stats-griffin'></div>
        <div id='table-griffin'></div>
    </div>

    <div class='tab-content' id='tab-content-dragon' style='display:none'>
        <div id='stats-dragon'></div>
        <div id='table-dragon'></div>
    </div>

    <div class='tab-content' id='tab-content-horse' style='display:none'>
        <div id='stats-horse'></div>
        <div id='table-horse'></div>
    </div>

    <div class='tab-content' id='tab-content-dog' style='display:none'>
        <div id='stats-dog'></div>
        <div id='table-dog'></div>
    </div>

    <div class='tab-content' id='tab-content-cat' style='display:none'>
        <div id='stats-cat'></div>
        <div id='table-cat'></div>
    </div>

    <div class='tab-content' id='tab-content-bird' style='display:none'>
        <div id='stats-bird'></div>
        <div id='table-bird'></div>
    </div>

</div>

<h2>Animals</h2>
<div id='test'></div>

CSS

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

#tab-buttons {
    display: flex;
    justify-content: space-evenly;
    position: relative;
    top: 1px;
}
.tab-button {
    padding: 10px;
    border: 1px solid grey;
    background-color: silver;
    border-radius: 5px 5px 0 0;
    transition: 0.3s;
}
.tab-button:hover {
    cursor: pointer;
    background-color: #fff;
    transition: 0.3s;
}
.active-tab {
    background-color: #fff;
    border-bottom: 1px solid #fff;
}
#tab-container {
    border: 1px solid grey;
    padding: 10px;
    border-radius: 5px;
}


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

JavaScript

$("#tab-buttons").on("click", ".tab-button", function(){
    let tab = $(this).data("tab");
    $(".tab-content").hide();
    $("#tab-content-" + tab).show();
    $(".tab-button").removeClass("active-tab");
    $(this).addClass("active-tab");
});


const breeds = [
    {
        name: "Aquila", type: "griffin",
        desc: "Common griffin. Eagle-lion, feathered.",
        baby: {
            l: 1, s: 1, m: 0, sL: 0, sS: 0, sM: 0
        },
        young: {
            l: 1, s: 1, m: 0, sL: 0, sS: 0, sM: 0
        },
        teen: {
            l: 1, s: 1, m: 0, sL: 0, sS: 0, sM: 0
        },
        adult: {
            l: 1, s: 1, m: 0, w: 0, sL: 0, sS: 0, sM: 0
        },
        adult2: {
            l: 1, s: 1, m: 0, w: 0, sL: 0, sS: 0, sM: 0
        },
        adult3: {
            l: 1, s: 1, m: 0, w: 0, sL: 0, sS: 0, sM: 0
        },
        adult4: {
            l: 1, s: 1, m: 0, w: 0, sL: 0, sS: 0, sM: 0
        },
    }, // aquila
    {
        name: "Opinicus", type: "griffin",
        desc: "Weird griffin, feathered neck only, large curved wings.",
        baby: {
            l: 1, s: 0, m: 0, sL: 0, sS: 0, sM: 0
        },
        young: {
            l: 1, s: 0, m: 0, sL: 0, sS: 0, sM: 0
        },
        teen: {
            l: 1, s: 0, m: 0, sL: 0, sS: 0, sM: 0
        },
        adult: {
            l: 1, s: 0, m: 0, w: 0, sL: 0, sS: 0, sM: 0
        },
        adult2: {
            l: 1, s: 0, m: 0, w: 0, sL: 0, sS: 0, sM: 0
        },
        adult3: {
            l: 1, s: 0, m: 0, w: 0, sL: 0, sS: 0, sM: 0
        },
        adult4: {
            l: 1, s: 0, m: 0, w: 0, sL: 1, sS: 0, sM: 0
        },
    }, // opi
    {
        name: "Hieracosphinx", type: "griffin",
        desc: "Lion falcon. Redraw...",
        baby: {
            l: 0, s: 0, m: 0, sL: 0, sS: 0, sM: 0
        },
        young: {
            l: 0, s: 0, m: 0, sL: 0, sS: 0, sM: 0
        },
        teen: {
            l: 0, s: 0, m: 0, sL: 0, sS: 0, sM: 0
        },
       ...