JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tab-menu">
  <span class="tab1">Tab 1</span>
  <span class="tab2">Tab 2</span>

  <div class="content">
    <div class="post post1">
       <p>
         dfsd sns ksnkn snskn sf a f sfs sfs dfsd sns ksnkn snskn sf a f            sfs ss dfsd sns ksnkn snskn sf a f sfs sfs dfsd sns ksnkn snskn            sf a f  sfs sfs 
       </p>
    </div>
    <div class="post post2">
       <p>
        Tab 2 Tab 2 Tab 2 Tab 2 Tab 2 Tab 2 Tab 2 Tab 2
        Tab 2 Tab 2 Tab 2 Tab 2 Tab 2 Tab 2 Tab 2 Tab 2
        Tab 2 Tab 2 Tab 2 Tab 2 Tab 2 Tab 2 Tab 2 Tab 2
        Tab 2 Tab 2 Tab 2 Tab 2 Tab 2 Tab 2 Tab 2 Tab 2
      </p>
    </div>
    
  </div>
</div>

CSS

.tab-menu{
  width: 300px;
  outline: 1px solid;
}
span{
  width: 49%;
  display: inline-block;
  vertical-align: top;
  background: green;
}

span:hover{
  cursor: pointer;
}

.content{position: relative}
.post{
  position: absolute;
  top: 0;
  left: 0;
}

.post2{
  display: none;
}

JavaScript

var mainDiv = document.querySelector(".tab-menu")
var tab1 = mainDiv.querySelector(".tab1")
var tab2 = mainDiv.querySelector(".tab2")

var post1 = document.querySelector(".post1")
var post2 = document.querySelector(".post2")

tab1.addEventListener('click', function(){
	post2.style.display='none';
  post1.style.display='block';
})

tab2.addEventListener('click', function(){
	post2.style.display='block';
  post1.style.display='none';
})