JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <ul class="block-grid three-up">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
        <li>Six</li>
    </ul>
</div>

CSS

.active {
    font-weight: bold;
}
.n-1 {
    background : red;
}
.n-2 {
    background : blue;
}
.n-3 {
    background : pink;
}
.n-4 {
    background : yellow;
}
.n-5 {
    background : green;
}
.n-6 {
    background : orange;
}

JavaScript

var prev;
$('#container li').hover(function () {
    var i = $(this).index() + 1;
    prev = `n - ` + i;
    $('#container ul').addClass(prev);
    $(this).addClass('active');
}, function () {
    i = $(this).index() + 1;
    $(this).removeClass('active');
    $('#container ul').removeClass(prev);
});