JSFiddle - React, Tailwind, and code Playground

HTML

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

<button class="test-button" id="test" type="button">Change Color!</button>

CSS

.colorChange {
    width: 150px;
    height: 150px;
    padding: 11px 16px;
    text-align: center;
    float: left;
    /* background: #ff3232; */
    background: linear-gradient(to right, red 50%, blue 50%);
    background-size: 200%;
    background-position: center bottom;
    margin-left: 10px;
    transition: all 2s ease;
    margin-right: 50px;
}

.test-button {
    height: 50px;
    width: 100px;
}

JavaScript

$(function() {
    $('#test').on('click', function() {
        $('.colorChange').css('background-position', 'right bottom');
    })
})