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: 100% 100%;
  background-position:left 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');
    })
})