JSFiddle - React, Tailwind, and code Playground

by Alexander

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


        function number(element, indx) {
            element.addEventListener('click', function() {
              // if(content.children[i].style.display='none'){
              //  alert(i);
              //  // Uncaught TypeError: Cannot read property 'style' of undefined
              // }
              if(content.children[indx].style.display='none'){
               alert(indx);
               // success
              }
            });
        }
        number(tab[i], i);

    }