JSFiddle - React, Tailwind, and code Playground

HTML

<div id="target"></div>
<div id="opacity">
    <div><a href="#">red</a></div>
    <div><a href="#">blue</a></div> 
    <div><a href="#">green</a></div>
</div>

CSS

#target {
    height: 100px;
    width: 232px;
    border: solid 1px black;
    margin: 10px;
}
#opacity div {
    display: inline-block;
    border:  solid 1px black;
    margin: 10px;
    width: 60px;
    text-align: center;
}

JavaScript

$('#opacity div').eq(0).find('a').click(function(){$('#target').css('background', 'red');});
$('#opacity div').eq(1).find('a').click(function(){$('#target').css('background', 'blue');});
$('#opacity div').eq(2).find('a').click(function(){$('#target').css('background', 'green');});