JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test"></div>

CSS

.test {
    height:100px;
    background:linear-gradient(black 50%,red 50%, red);
}

.test:hover {
    background:linear-gradient(green 50%,red 50%, red);
}