JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu-content">
        <a  class="show" href="#">Home</a>
        <a  class="show" href="#">Contact</a>
        <a  class="show" href="#">About us</a>
        <a  class="show" href="#">A-Team</a>
        <a  class="show" href="#">Connect</a>
        <a  class="show" href="#">Donate</a>
    </div>
  <div id="container">
        <div class="cont ok" style=" background-color:blue;">
        </div>

        <div class="cont"  style="background-color:red;">
         </div>

        <div class="cont"  style="background-color:green;">
        </div>  

        <div class="cont" style="background-color:pink;">
        </div>

        <div class="cont"  style="background-color:yellow;">
        </div>  

        <div class="cont"  style="background-color:orange; height: 500px;">
        </div>
  </div>

CSS

#container{
	height: 300px;
	width: 500px;
	position:relative;
}
.cont{
	float: left;
	height: 300px;
	width: 500px;
	position:absolute;
	opacity:0;
}

JavaScript

$('div.ok').css('opacity','1')
    $('.show').click(function() {
		var ind=$(this).index();
        $('#container').find('div:eq('+ind+')').animate({'height':'100'},{
			  duration:1000,
			  step:function(gox){
				  var op = gox
				  var op = gox < 1 ? (1 - gox) : 0;
                  $('#container').find('div.ok').css('height',op)
				 },
			  complete:function(){
				  $('#container div').removeClass('ok')
				  $('#container').find('div:eq('+ind+')').addClass('ok')
			  }
		});
		
    });