JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='container'>
    
    <div id='colour-container'>
    
        <div id='elements'></div>
    
        <div id='palette'></div>
    
        <div id='slot-elem1' class='elem-slot selected-slot' data-slot='1'></div>
        <div id='slot-elem2' class='elem-slot' data-slot='2'></div>
    
        <div id='slot-colour1' class='colour-slot selected-slot' data-slot='1'></div>
        <div id='slot-colour2' class='colour-slot' data-slot='2'></div>
        
        <div id='pet-preview'></div>
    
    </div>
    
    <h3>Full palette</h3>
    <div id='full-palette'></div>
    
</div>

CSS

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

body {
    background-color: skyblue;
}

#container {
    width: 970px;
    padding: 40px;
    margin: 20px;
    background-color: #fff;
    border-radius: 10px;
}


#colour-container {
    position: relative;
    width: 100%;
    height: 350px;
}

/* See pet's image with updated colours. */
#colour-container #pet-preview {
    position: absolute;
    top: 0;
    right: 0;
    width: 450px;
    height: 350px;
    background-color: #eee;
}

/* Select a primary and a secondary elem. */
#colour-container #elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 380px;
    height: 80px;
    border: 1px solid grey;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
#elements .element {
    width: 85px;
    height: 30px;
    margin: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    background-color: #eee;
}
#elements .element:hover {
    cursor: pointer;
}
#elements .selected-element {
    border: 1px solid grey;
}


/* Shows available colours. Select up to 2. */
#colour-container #palette {
    position: absolute;
    top: 90px;
    left: 0;
    width: 380px;
    height: 150px;
    border: 1px solid grey;
    padding: 5px;
    overflow: auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}
#palette .palette-colour {
    width: 45px;
    height: 30px;
    margin: 5px;
    border-radius: 5px;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5),
                inset 0 0 0 1px rgba(0, 0, 0, 0.7);
}
#palette .palette-colour:hover {
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.9);
}
#palette .selected-colour {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6),
                inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}


/* See 2 chosen elems and 2 chosen colours. */
#colour-container .elem-slot,
#colour-container .colour-slot {
   ...

JavaScript

const db = {
    
    elements: [
        {id: 1, name: "Fire", hex: "FF9600"},
        {id: 2, name: "Ice", hex: "CFECEE"},
        {id: 3, name: "Water", hex: "80E2FC"},
        {id: 4, name: "Earth", hex: "B5F549"},
        {id: 5, name: "Wind", hex: "00E1C1"},
        {id: 6, name: "Thunder", hex: "BF84FC"},
        {id: 7, name: "Light", hex: "FDFABA"},
        {id: 8, name: "Shadow", hex: "9F9F9F"},
    ],
    
    palette: [
        {id: 1, hex: "FFD600", name: "gold"},
        {id: 2, hex: "FF9600", name: "orange"},
        {id: 3, hex: "FF0000", name: "red"},
        {id: 4, hex: "D00808", name: "crimson"},
        {id: 5, hex: "F1F9FA", name: "snow"},
        {id: 6, hex: "CFECEE", name: "ice"},
        {id: 7, hex: "B3DADD", name: "ice3"},
        {id: 8, hex: "93BBBE", name: "ice4"},
        {id: 9, hex: "7E9A9C", name: "ice5"},
        {id: 10, hex: "D2F4FD", name: "water1"},
        {id: 11, hex: "80E2FC", name: "water2"},
        {id: 12, hex: "0ECAFA", name: "water3"},
        {id: 13, hex: "139CF6", name: "water4"},
        {id: 14, hex: "0F7EC6", name: "water5"},
        {id: 15, hex: "E6F9EA", name: "gr1"},
        {id: 16, hex: "8DF1A1", name: "gr2"},
        {id: 17, hex: "1CE40D", name: "gr3"},
        {id: 18, hex: "17C10B", name: "gr4"},
        {id: 19, hex: "0A8F00", name: "gr5"},
        {id: 20, hex: "F6EACC", name: "br1"},
        {id: 21, hex: "EDD28F", name: "br2"},
        {id: 22, hex: "D6A839", name: "br3"},
        {id: 23, hex: "B98607", name: "br4"},
        {id: 24, hex: "CCBA8F", name: "br5"},
        {id: 25, hex: "AA9564", name: "br6"},
        {id: 26, hex: "887036", name: "br7"},
        {id: 27, hex: "CFFAF3", name: "w1"},
        {id: 28, hex: "6BEDDA", name: "w2"},
        {id: 29, hex: "00E1C1", name: "w3"},
        {id: 30, hex: "00A58D", name: "w4"},
        {id: 31, hex: "F8E9FC", name: "th1"},
        {id: 32, hex: "E585FC", name: "th2"},
        {id: 33, hex: "C800F6", name: "th3"},
        {id: 34, hex:...