JSFiddle - React, Tailwind, and code Playground

HTML

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

  <div class="content">
    <div class="post">
       <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">
       <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;
}

JavaScript

var tab = document.querySelectorAll(".tab");
 var content = document.querySelector(".content");
 var post = document.querySelectorAll(".post");
 
 tab[0].style.backgroundColor='red';
 
   for (var i = 0; i < content.children.length; i++) { 
   	content.children[0].style.display='block';
      content.children[i].style.display='none';
      
      	for(var a = 0; a < tab.length; a++){
       		tab[a].addEventListener("click", function(){
         		if(content.children[i].style.display='none'){
         			this.style.display='block';
         	}
        })
       }
    }