JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">BGCOLOR TO CHANGE HERE</div>
<br />
<img class="color-select" data-color="black" src="images/black.png" alt="" />
<img class="color-select" data-color="red" src="images/red.png" alt="" />
<img class="color-select" data-color="blue" src="images/blue.png" alt="" />
<img class="color-select" 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: #990000 !important;
}
.green {
background-color: #990000 !important;
}

JavaScript

$(document).ready(function() {
    $('.color-select').click(function() {
        $('#box').css("background",$(this).data("color"));
    });
    
});