JSFiddle - React, Tailwind, and code Playground

HTML

<div class="step-1"> 
  <!-- CODE -->
</div >

<div class="step-2"> 
  <!-- THIS DIV IS HIDDEN TO BEGIN WITH -->
</div >

<button class="step-1-next">Button</button>

CSS

.step-1 {
    background: blue;
    top: 20px;
    left: 20px;
   
}

.step-2 {
    background: red;
    display: none;
    top: 130px;
    left: 20px;
}

div {
    width: 100px; 
    height: 100px;
    margin: 20px;
    position: absolute;
}

button {
    position: absolute;
    right: 50px;
    top: 0;
}

JavaScript

$( ".step-1-next" ).on( "click", function() {
    $( ".step-1" ).fadeOut( "slow" );
    $( ".step-2" ).fadeIn( "slow" );
    return false;
});