JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
</ul>

CSS

body {
    background: url("https://placehold.it/1250x550/000000") no-repeat 50% 50% fixed,
        url("https://placehold.it/1250x550/ff0000") no-repeat 50% 50% fixed,
        url("https://placehold.it/1250x550/00ff00") no-repeat 50% 50% fixed,
        url("https://placehold.it/1250x550/0000ff") no-repeat 50% 50% fixed;
    transition: all ease-in-out 0.5s;
    color: #fff;
}
.background-0 {
    background: url("https://placehold.it/1250x550/000000") no-repeat -2000px 50% fixed,
        url("https://placehold.it/1250x550/ff0000") no-repeat 50% 50% fixed,
        url("https://placehold.it/1250x550/00ff00") no-repeat 50% 50% fixed,
        url("https://placehold.it/1250x550/0000ff") no-repeat 50% 50% fixed;
}
.background-1 {
    background: url("https://placehold.it/1250x550/000000") no-repeat -2000px 50% fixed,
        url("https://placehold.it/1250x550/ff0000") no-repeat -2000px 50% fixed,
        url("https://placehold.it/1250x550/00ff00") no-repeat 50% 50% fixed,
        url("https://placehold.it/1250x550/0000ff") no-repeat 50% 50% fixed;
}
.background-2 {
    background: url("https://placehold.it/1250x550/000000") no-repeat -2000px 50% fixed,
        url("https://placehold.it/1250x550/ff0000") no-repeat -2000px 50% fixed,
        url("https://placehold.it/1250x550/00ff00") no-repeat -2000px 50% fixed,
        url("https://placehold.it/1250x550/0000ff") no-repeat 50% 50% fixed;
}

JavaScript

var list_elements = $('ul li');
var current_index = null;
list_elements.on('mouseenter', function() {
    current_index = list_elements.index(this);
    $('body').addClass('background-' + current_index);

}).on('mouseleave', function() {
    $('body').removeClass('background-' + current_index);
    current_index = null;
});