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 li').hover(function(){
    $('#preview').css({'background':$(this).attr('class')}); 
},function(){
    $('#preview').css({'background':'#c245ff'});
});