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
   		content.children[0].style.display='block';
      content.children[i].style.display='none';
     
    }
    
    for (var i = 0; i < tab.length; i++) {
   		var index;
    	tab[i].addEventListener('click', function (){
			var isActive = (tab[index].getAttribute('style') == 'background-color: red;') ? true : false,
      isHidden = (post[index].getAttribute('style') == 'display: none;') ? true : false;
      
       if (!isActive) {
              [].forEach.call(tab, function(el) {
                el.removeAttribute('style');
              });
              tab[index].style.backgroundColor='red';
            }

            if (isHidden) {
              [].forEach.call(content.children, function(el) {
                el.style.display='none';
              });
              post[index].style.display='block';
            }
        })
        (i);
    }