JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test"></div>
<div id="test2"></div>
<button id="button">Click</button>

CSS

#test {
    position:absolute;
    top:100px;
    right:0px;
    width:100%;
    height:500px;
    border:1px solid black;
    background: #ffaf4b;
    background: -webkit-radial-gradient(center, ellipse cover,  #ffaf4b 0%,#ff920a 100%);
}

#test2 {
    display:none;
    position:absolute;
    top:100px;
    right:0px;
    width:100%;
    height:500px;
    border:1px solid black;
    background: #ffaf4b;
    background: -webkit-radial-gradient(center, ellipse cover,  #af4bff 0%,#920aff 100%);
}

JavaScript

$('#button').click(function() {
    $('#test').fadeOut(5000);
    $('#test2').fadeIn(5000);
});