JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="bg-wrapper" class="old-background"></div>
<div id="content-wrapper">
    <h1>content</h1>
    <p>Click anywhere</p>
</div>
</body>

CSS

#bg-wrapper{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -999;
}

.old-background{
    background-color: cyan;
}

.new-background{
    background-color: magenta;
}

JavaScript

$(document).ready(function(){
    $('#bg-wrapper').click(function(){
        $(this).fadeOut(function(){
            $(this).removeClass("old-background").addClass("new-background").fadeIn();
        });
    });
});