JSFiddle - React, Tailwind, and code Playground

HTML

<div id="target"></div>
<ul id="trigger">
    <li>red</li>
    <li>blue</li> 
    <li>green</li> 
</ul>

CSS

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

JavaScript

$('#trigger li').eq(0).click(function(){$('#target').css('background', 'red');});
$('#trigger li').eq(1).click(function(){$('#target').css('background', 'blue');});
$('#trigger li').eq(2).click(function(){$('#target').css('background', 'green');});
$('#target').click(function(){$(this).css('background', 'white')});