JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='container'>

    <div id='tool-bg'>
	    <div id='tool-pet'></div>
	</div>
	
    <div id='test-json'>[.....]</div>
    
	<div id='tool-container'>
	
	    <!-- Tab sidebar. -->
	    <div id='tool-tab-btns'>
            <div id='tool-name'>Phenotype Viewer</div>
        
		    <div class='tool-tab-btn active-tab' data-tab='eu'>Eumelanin</div>
		    <div class='tool-tab-btn' data-tab='phaeo'>Phaeomelanin</div>
		    <div class='tool-tab-btn' data-tab='caro'>Carotenoid</div>
		    <div class='tool-tab-btn' data-tab='struct'>Structural</div>
		    <div class='tool-tab-btn' data-tab='w'>White Patterns</div>
		    <div class='tool-tab-btn' data-tab='other'>Other</div>
		</div>
		
		<div id='tool-tab-content'>
		    
            <!-- Basic options panel. -->
		    <div id='tool-panel'>
		        <span>
                    Breed: <select id='select-breed'>
                        <option value='1'>Aquila</option>
                    </select>
                    &nbsp &nbsp &nbsp
		            Pose: <select id='select-pose'>
		                <option value='1'>Standing</option>
		            </select>
                </span>
                <span>
			        <button class='randomise-btn' data-random='all'>Randomise!</button>
			        <button class='reset-btn' data-reset='all'>Reset to Wildtype</button>
                    <button id='create-pet-btn'>Create Griffin</button>
                </span>
		    </div>
            
            <!-- Main tab contents. -->
            
			<div id='tool-tab-eu' class='tool-tab'>
				<p>Eumelanin pigment is usually black, but can appear brown, grey, silver or even purple with a little magic. Most wild griffins display it. It can form many intricate patterns, from spots to stripes to lacing to tortoiseshell...</p>
                
				<div id='eu-palette' class='palette-box'>
                    <div class='palette-title'>Eu Palette</div>
				    <div class='tool-palette' data-palette='eu'>
                        [JS...

CSS

div, canvas, img, button, input, select {
    box-sizing: border-box;
}

#container {
    width: 970px;
    padding: 30px;
}

#tool-bg {
    width: 680px;
    background-color: lightblue;
    padding: 15px;
    border-radius: 5px;
    margin: 10px auto;
}
#tool-bg #tool-pet {
    width: 450px;
    height: 350px;
    border: 1px dashed grey;
    margin: auto;
}


#tool-container {
    width: 100%;
    height: 400px;
    border: 1px solid silver;
    display: flex;
    border-radius: 5px;
    overflow: hidden;
}

#tool-tab-btns {
    width: 190px;
    background-color: #eee;
    border-right: 1px solid silver;
}
#tool-tab-btns .tool-tab-btn {
    position: relative;
    left: 1px;
    padding: 8px 10px;
    margin: 5px 0 0 5px;
    border-right: 1px solid silver;
    border-radius: 3px 0 0 3px;
}
#tool-tab-btns .tool-tab-btn:hover {
    cursor: pointer;
    background-color: #fff;
}
#tool-tab-btns .active-tab {
    border: 1px solid silver;

    border-right: 1px solid #fff;
    background-color: #fff;
    font-weight: bold;
}

#tool-tab-content {
    width: 720px;
}
#tool-panel, 
#tool-name {
    height: 40px;
    background-color: #eee;
    border-bottom: 1px solid silver;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#tool-panel button {
    padding: 3px 8px;
    margin: 0 4px;
}
#tool-panel button:hover {
    cursor: pointer;
}

.tool-tab {
    padding: 0 15px 15px 15px;
    margin-top: -5px;
    height: 360px;
    overflow: auto;
}


.palette-box {
    width: 300px;
    border: 1px solid silver;
    padding: 5px;
}
.tool-palette {
    display: flex;
    flex-flow: row wrap;
    width: 200px;
    height: 60px;
}
.tool-palette .tool-swatch {
    border-radius: 2px;
    margin: 1px;
    width: 30px;
    height: 30px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.tool-palette .tool-swatch:hover {
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 
                inset 0 0 0 2px...

JavaScript

const db = {

    breeds: [
        {
            id: 1, name: "Aquila", url: "aquila",
            poses: [
                {id: 1, name: "Standing", url: "adult"},
                {id: 2, name: "Sitting", url: "adult2"},
                {id: 3, name: "Intimidating", url: "adult3"},
                {id: 4, name: "Hovering", url: "adult4"}
            ]
        },{
            id: 2, name: "Opinicus", url: "opinicus",
            poses: [
                {id: 1, name: "Standing", url: "adult"},
                {id: 2, name: "Sitting", url: "adult2"},
                {id: 3, name: "Dramatic", url: "adult3"},
                {id: 4, name: "Alternative", url: "adult4"}
            ]
        },{
            id: 3, name: "Minoan", url: "minoan",
            poses: [
                {id: 1, name: "Standing", url: "adult"},
                {id: 2, name: "Reclining", url: "adult2"}
            ]
        },{
            id: 4, name: "Mycenaean", url: "mycen",
            poses: [
                {id: 1, name: "Standing", url: "adult"},
                {id: 2, name: "Sitting", url: "adult2"},
                {id: 3, name: "Lying Down", url: "adult3"},
                {id: 4, name: "Curvy Wings", url: "adult4"}
            ]
        }
    ],
    

    palettes: {
        eu: [
            ["Black", "000000"],
            ["Steel", "FFCC33"],
            ["Lavender", "AAAAAA"],
            ["White", "BBBBBB"]
        ],
        phaeo: [
            ["Black", "000000"],
            ["Steel", "FFCC33"],
            ["Lavender", "AAAAAA"],
            ["White", "BBBBBB"]
        ],
        caro: [
            ["Yellow", "000000"],
            ["Gold", "FFCC33"],
            ["Orange", "AAAAAA"],
            ["Flame", "BBBBBB"],
            ["Red", "EEEEEE"]
        ],
        blue: [
            ["Yellow", "000000"],
            ["Gold", "FFCC33"],
            ["Orange", "AAAAAA"],
            ["Flame", "BBBBBB"],
            ["Red", "EEEEEE"]
        ],
        metal: [
      ...