JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block-div" onclick="swap('div1')" id="div1">1</div>
<div class="block-div" onclick="swap('div2')" id="div2">2</div>

CSS

.block-div {
  position: absolute;
  height: 200px;
  width: 400px;
  color: #fff;
  font-size: 40px;
  text-align: center;
}

#div2{ display: none; background-color: brown; }
#div1{ background-color: red; }

html, body{
  background-color: #fff;
}

JavaScript

window.swap = function(divId){
	if(divId === 'div1'){
  	jQuery('#div1').fadeOut({easing: 'linear'});
    jQuery('#div2').fadeIn({easing: 'linear'});
  }else{
  	jQuery('#div2').fadeOut({easing: 'linear'});
    jQuery('#div1').fadeIn({easing: 'linear'});
  }
}