JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div class="top">
    top
    <a href="#" class="link" data-id="item1">1</a>
    <a href="#" class="link" data-id="item2">2</a>
    <a href="#" class="link" data-id="item3">3</a>
  </div>
  <div class="middle">
    <div class="carusel">
      <div class="item" id="item1">1</div>
      <div class="item" id="item2">2</div>
      <div class="item" id="item3">3</div>
    </div>
  </div>
  <div class="bottom">bottom</div>
</div>

CSS

html, body{
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden;
}

.main{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}

.top{
  position:absolute;
  top:0;
  width:100%;
  height:50px;
  background:#bbb;
}
.middle{
  position:absolute;
  top:50px;
  bottom:50px;
  width:100%;
  background:#fff;
}
.bottom{
  position:absolute;
  bottom:0;
  width:100%;
  height:50px;
  background:#bbb;
}

.carusel{
  width:100%;
  height:100%;
  overflow:hidden;
  position:relative;
}
.item{
  position:absolute;
  width:100%;
  height:100%;
  z-index:0;
}
#item1{
  background:#f00;
}
#item2{
  background:#0f0;
}
#item3{
  background:#00f;
}

JavaScript

$(function(){
	$('.link').on('click',function(){
  	$('.item').css({'z-index':'0'});
  	$('#'+$(this).attr('data-id')).css({'z-index':'1'});
  });
});