JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div id="imgWrapper">
    <div class="plain"></div>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
</div>

CSS

#imgWrapper {
    float: left;
    border: 3px solid #e1e1e1;
}

#imgWrapper div {
    width: 90px;
    height: 90px;
    display: none;
}


#colorPicker div{
    float: left;
    width: 20px;
    height: 20px;
}

#imgWrapper .plain {
    display: block;
}

#colorPicker .active {
    border: 1px solid yellow;
}




/*colors*/
.plain {
    background: #c1c1c1;
}
.red {
    background: red;
}
.blue {
    background: blue;
}
.green {
    background: green;
}

JavaScript

var imgWrapper = $('#imgWrapper');

$('<div id="colorPicker"></div>').insertAfter( imgWrapper );

var colorPicker = $('#colorPicker') 

imgWrapper.children().clone().appendTo( colorPicker );


colorPicker.find('div:first').addClass('active');  
colorPicker.find('div').on('click', function() {

    var color = $(this),
        colorClass = color.attr('class');
    
    color.addClass('active').siblings().removeClass('active');
    
    imgWrapper.find('.' + colorClass )
        .show()
        .siblings().hide();
    
});