JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="slide slide-1"></div>
    <div class="slide slide-2"></div>
</div>

CSS

.wrapper {
    position:absolute;
    background:red;
    width:100%;
    height:100%;
    top:0;
    left:0;
    overflow:hidden;
}

.slide {
    width:100%;
    height:100%;
    -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.slide-1 {
    position:fixed;
    top:0;
    left:0;
    background:blue;
}

.slide-2 {
    position:absolute;
    top:100%;
    left:0;
    background:green;
}

.slide-2.active {
    position:fixed;
    top:0;
    left:0;
}

JavaScript

$('.slide-1').click(function(){
$('.slide-2').addClass('active');
})