JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>Change Color 1</li>
    <li>Change Color 2</li>
    <li>Change Color 3</li>
</ul>

CSS

body{
    transition: background-color 2s;
}

/* not related to answer ignore */
li {list-style:none;font-family:sans-serif; padding:4px; background-color:rgba(0,0,0,.1);width:130px;text-align:center;margin:5px;}

JavaScript

bg=$(document.body);
color=['orange','rgb(42, 212, 255)','rgb(219, 255, 74)'];

$('li').each(function(e){
    $(this).hover(function(){
    bg.css('background-color',color[e]);
    });
});