JSFiddle - React, Tailwind, and code Playground

by TrueBlueAussie

HTML

<div id="box">BGCOLOR TO CHANGE HERE</div>
<br />
<img class="color" data-color="black" src="images/black.png" alt="" />
<img class="color" data-color="red" src="images/red.png" alt="" />
<img class="color" data-color="blue" src="images/blue.png" alt="" />
<img class="color" data-color="green" src="images/green.png" alt="" />

CSS

#box {
width: 200px;
height: 200px;
background-color: #3FA5D5;
}
.black {
background-color: #000000 !important;
}
.red {
background-color: #990000 !important;
}
.blue {
background-color: #000099 !important;
}
.green {
background-color: #009900 !important;
}

JavaScript

$('img.color').click(function(){
    $('#box').removeClass("black red blue green").addClass($(this).data('color'));
});