JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='container'>
<div id='page-content'>
    
    <p>Customisation: live editor. Here you can fiddle with items and perfect your griffin's appearance! All of your owned items are listed in the boxes. Click on one to add it to the editor and play with it.<br>Don't worry, <b>nothing will be taken from your inventory</b>, or actually added/removed from your griffin, until you click the 'Save Changes' button.</p>
    <p>Other users/guests will see simple lists of current equipment (img, name, opacity). No preview canvas or other options. ... maybe option to view griff without wearables or bg stuff? just the plain coat.</p>
    
    <div id='pet-preview-container'>
        <div id='pet-preview-coat'></div>
    </div>
    
    <!-- Current equipped stuff -->
    <div class='editor-sections'>
        
        <div class='editor-section-bg'>
            <div class='editor-section-title'>Background</div>
            
            <div id='current-bg-options'>
                <div id='current-bg-image'>
                    <img src='..'>
                </div>
                <div id='current-bg-name'>
                    Name here
                </div>
                <div class='bg-option'>
                    Flip this? <input type='checkbox'>
                </div>
                <div class='bg-option'>
                    Flip griffin? <input type='checkbox'>
                </div>
                <div class='bg-option'>
                    Opacity: <input type='number' min='10' max='100' value='100' step='10'>
                </div>
                <div class='bg-option'>
                    Colour: <input type='color' value='#FFFFFF'>
                </div>
                <div class='bg-option'>
                    Contrast: <input type='number' min='0.1' max='2' value='1' step='0.1'>
                </div>
                <div class='bg-option'>
                    Opacity: <input type='number' min='10' max='100' value='100' step='10'>
                </div>
...

CSS

div, img, canvas, p, button, input, ul, li {
    box-sizing: border-box;
}

body {
    background-color: #eee;
    width: 1040px;
    color: #664C30;
}












#container {
    width: 970px;
    margin: 20px auto;
    
}
#page-content {
    background-color: #fff;
    padding: 20px;
    margin: 20px auto;
}

#pet-preview-container {
    width: 760px;
    height: 450px;
    background-color: skyblue;
    margin: 0 auto 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
#pet-preview-coat {
    width: 450px;
    height: 350px;
    border: 1px dashed black;
}

/* 2 rows of 3 sections. */
.editor-sections {
    display: flex;
    justify-content: space-between;
}
.editor-sections .editor-section-bg {
    width: 174px;
    margin: 5px 0;
    background-color: #eee;
    text-align: center;
}
.editor-sections .editor-section-other {
    width: 370px;
    margin: 5px 0;
    background-color: #eee;
    padding: 5px;
}
.editor-sections .editor-section-third {
    width: 305px;
    margin: 5px 0;
    background-color: #eee;
}
.editor-sections .editor-section-title {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid silver;
    padding: 5px;
    margin-bottom: 5px;
}

/* Current background info. */
#current-bg-options {
    text-align: center;
    padding: 5px;
}
#current-bg-options .bg-option {
    width: 150px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    margin: 4px auto;
}
#current-bg-options input {
    width: 55px;
    height: 20px;
}
#current-bg-options input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border-radius: 0;
    border: none;
    padding: 0;
    margin: 0;
}
#current-bg-options input[type="color"] {
    border-radius: 0;
    border: none;
    padding: 0;
}
#current-bg-image {
    width: 140px;
    height: 110px;
    background-color: lightblue;
    margin: auto;
}
#current-bg-name {
    margin:...