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;
}

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

.post2{
  display: none;
}

JavaScript

var tab = document.querySelectorAll(".tab"),
        content = document.querySelector(".content"),
        post = document.querySelectorAll(".post");

    tab[0].style.backgroundColor='red';

    for (var i = 0; i < content.children.length; i++) {
      content.children[i].style.display='none';
      content.children[0].style.display='block';
    }

    for (var i = 0; i < tab.length; i++) {

      (function(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);

    }