JSFiddle - React, Tailwind, and code Playground

HTML

<div id="preview">
</div>
<ul id="crop">
    <li class="red">red</li>
    <li class="green">green</li>
    <li class="black">black</li>
</ul>

CSS

#preview{
    display:block;
    width:200px;
    height:200px;
    background:#c245ff;
}
#crop li{
    float:left;
    display:block;
    margin:3px;
    border:1px solid red;
    padding:3px;
}

JavaScript

$('#crop').on('mouseover','li',function(){
    var color = $(this).attr('class');
    $('#preview').css({'background':color});
})
$('#crop').on('mouseleave',function(){
    $('#preview').css({'background':'#c245ff'});
})