JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" class="first">
    TEST
</div>

CSS

.first {
    background: green;
}

.second {
    background: orange;
}

JavaScript

var container = document.querySelector('#container');

container.addEventListener('mouseenter', function(){
        this.classList.remove('first');
        this.classList.add('second');
})
container.addEventListener('mouseleave', function(){
        this.classList.add('first');
        this.classList.remove('second');
})