JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mirza1"></div>
<div id="mirza2" style="display:none;"></div>
<div id="mirza3" style="display:none;"></div>

<br />
<br />
<br />
<a href="#" id="show1">One</a>
<a href="#" id="show2">Two</a>
<a href="#" id="show3">Three</a>

CSS

#body{ padding:20px;}

#mirza1, #mirza2, #mirza3{
 width:50px;
 height:50px;
 display:block;
 background-color:red; 
   position : absolute; 
}

#mirza2{background-color:blue;}
#mirza3{background-color:green;}

JavaScript

$('#show2').click(function() {
  $('#mirza1, #mirza3').fadeOut(500);
  $('#mirza2').fadeIn(500);
});

$('#show3').click(function() {
  $('#mirza1, #mirza2').fadeOut(500);
  $('#mirza3').fadeIn(500);
});

$('#show1').click(function() {
  $('#mirza2, #mirza3').fadeOut(500);
  $('#mirza1').fadeIn(500);
});