JSFiddle - React, Tailwind, and code Playground

by lukerichison

HTML

<div id="global_options">
    <div id="selections">
        <div class="style">
            <h4>Style</h4>
            <div class="default"></div>
        </div>
        <div class="color_shemes">
            <h4>Color Scheme</h4>
            <div class="default"></div>
        </div>
        <div class="font">
            <h4>Font</h4>
            <div class="default"></div>
        </div>
        <div class="pattern">
            <h4>Pattern / Dye</h4>
            <div class="default"></div>
        </div>
        <div class="quantity">
            <h4>Quantity</h4>
            <div class="default"></div>
        </div>
    </div>
    <div id="selectors">
        <div class="style">
            <div>
                <h4>Roberta</h4>
                <div class="roberta"></div>
            </div>
            <div>
                <h4>Margot</h4>
                <div class="margot"></div>
            </div>
            <div>
                <h4>Milady</h4>
                <div class="milady"></div>
            </div>
            <div>
                <h4>Ferris</h4>
                <div class="ferris"></div>
            </div>
            <div>
                <h4>Berkeley</h4>
                <div class="berkeley"></div>
            </div>
        </div>
        <div class="color_shemes">
            <div>
                <h4>Color 1</h4>
                <div class="color1"></div>
            </div>
            <div>
                <h4>Color 2</h4>
                <div class="color2"></div>
            </div>
            <div>
                <h4>Color 3</h4>
                <div class="color3"></div>
            </div>
            <div>
                <h4>Color 4</h4>
                <div class="color4"></div>
            </div>
            <div>
                <h4>Custom</h4>
                <div class="colorcustom"></div>
            </div>
        </div>
        <div class="font">
            <div>
                <h4>Didot</h4>
                <div...

CSS

html, body {margin: 0; padding: 0;}
#global_options {
    width: 100%;
    max-width: 1450px;
    background-color: #EAE5E6;
    border-bottom: 1px solid #A09296;
}
#global_options,
#global_options > div {
    height: 10em;
    overflow: hidden;
}
#global_options > div {
    padding: 0.5em 0;
}
#selections > div,
#selectors > div > div {
    width: 20%;
    float: left;
}
#selectors > div {
    display: none;
}
#selections > div > div,
#selectors > div > div > div {
    height: 6em;
    background-color: #FFF;
    border: 1px solid #A09296;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}
#global_options h4 {
    text-align: center;
    height: 2em;
    font-weight: normal;
}
#global_options h4,
#selections > div > div,
#selectors > div > div > div {
    width: 80%;
    margin: 0 10%;
}

div.default {background-image: url(http://www.gritandglory.com/wp-content/uploads/2011/12/choose.png);}

div.roberta {background-image:  url(http://static.wixstatic.com/media/52c408_702dc3c44ed68c4aab2d569718ba7fb8.jpg_srz_p_318_316_85_22_0.50_1.20_0.00_jpg_srz);}
div.margot {background-image:   url(http://static.wixstatic.com/media/52c408_7023320c89d2525b163cb696d9316019.jpg_srz_p_318_316_85_22_0.50_1.20_0.00_jpg_srz);}
div.milady {background-image:   url(http://static.wixstatic.com/media/52c408_c7d5dfc81340249248e3d15ea431e926.jpg_srz_p_318_316_85_22_0.50_1.20_0.00_jpg_srz);}
div.ferris {background-image:   url(http://static.wixstatic.com/media/52c408_bfecd68cb93f11b3d731ad31e5732f51.jpg_srz_p_318_316_85_22_0.50_1.20_0.00_jpg_srz);}
div.berkeley {background-image: url(http://static.wixstatic.com/media/52c408_68cc7591d7d0bba3cbedffa105c6b9b3.jpg_srz_p_318_316_85_22_0.50_1.20_0.00_jpg_srz);}

div.color1 {background-image:   url(http://mirrormirrorblog.com/images/various/WindowsLiveWriter/ColourLovers_F32E/Sugar_Almonds_thumb%5B3%5D.png);}
div.color2 {background-image:   url(http://media.coletterie.com/2010/06/cl-02.png);}
div.color3...

JavaScript

var selections = $('#selections'),
    selectors = $('#selectors');
selections.children('div').children('div').click(function(){
    var selection = $(this);
        selclass = selection.parent('div').attr('class'),
        seloptions = selectors.children('div.'+selclass);
    seloptions.show();
    selections.slideUp();
    seloptions.children('div').children('div').click(function(){
        selection.removeClass().addClass($(this).attr('class'));
        selections.slideDown(function(){
            seloptions.hide();
        });
    });
});