JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button">
    <a href="#" id="show">Show</a>    
</div>

<div class="button">
    <a href="#" id="hide">Hide</a>    
</div>

<!---- Boxes ---->
<div id="box1">
    <span>BOX-1</span>
</div>

<div id="box2">
    <span>BOX-2</span>
</div>

CSS

a {
    color: #FFF;
    text-decoration: none;
}

.button {
    width: 50px;
    height: 20px;
    background: #ff7373;
    margin: 20px;
    padding: 10px;
    display: inline-block;
    z-index: 9;
    float:left;
    
}

/*==== Boxes ====*/

#box1 {
	top: 0px;
	background: #7DA2FA;
	height: 300px;
	width: 300px;
	position: absolute;	
	display: none;
	color: #000000;
    z-index: -1;
    float: left;
}

#box2 {
    top: 0px;
    position: relative;
	box-sizing: border-box;
	height: 300px;
	width: 300px;
	background: #4FE3B7;
	color: #000000;
    float: left;
    z-index: -1;
    opacity: 0;
}

JavaScript

$(document).ready(function(){ $('#box2').show().animate({'top': '155px', opacity: 1}, 0); 
    $('a#hide').click(function(){
    
        $('#box1').animate({'top': '0px', easing: 'easeInOutCubic', opacity: 0}, 500, 
           function () {$('#box1').hide();});
        
    $('#box2').show().animate({'top': '155px', opacity: 1}, 500); 
    
    })

    $('a#show').click(function(){
    $('#box1').show().animate({'top': '155px', opacity: 1}, 500);       
    $('#box2').animate({'top': '0px', easing: 'easeInOutCubic', opacity: 0}, 500, 
           function () {$('#box2').hide();});
  })
 });
*/