JSFiddle - React, Tailwind, and code Playground

by Megi93

HTML

<div class="tabs">
    <div class="tab active" data-id="tabContent1">tab1</div>
    <div class="tab" data-id="tabContent2">tab2</div>
    <div class="tab" data-id="tabContent3">tab3</div>

    <div class="clearfix"></div>

    <div class="content active" id="tabContent1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo quos maxime asperiores eos dicta fugiat maiores sint labore atque autem magni magnam, ducimus, quia nisi exercitationem iure, facere possimus architecto?</div>

    <div class="content" id="tabContent2">Lorem ipsum dolor sit amet!</div>

    <div class="content" id="tabContent3">Quod tempora veniam incidunt, corporis omnis sapiente molestiae esse, dignissimos, eaque reprehenderit dolorum quaerat! Sequi.</div>
</div>

CSS

.tabs {
    padding: 50px;
}

.tab {
    display: inline-block;
    width: 100px;
    height: 50px;
    padding: 10px;
    text-align: center;
    line-height: 50px;
    border: 1px solid black;
    float: left;
    cursor: pointer;
    user-select: none;
}

.tabs .tab.active {
    transition: transform 300ms ease;
    background: pink;
    border-color: aqua;
    color: #fff;
    transform: scale(1.15);
    transform-origin: bottom center;
    z-index: 999;
    position: relative;
}

.clearfix {
    clear: both;
}

.content {
    padding: 15px;
    width: 350px;
    text-align: center;
    display: none;
}

.content.active {
    display: block;
}

JavaScript

var tabbs = document.querySelector(".tabs").querySelectorAll(".tab");
var contents = document.querySelector(".tabs").querySelectorAll(".content");
var activeContent = document.querySelector(".tabs").querySelector(".content.active");

// first when we have more than one .tab we need to have for loop
for (var i = 0; i < tabbs.length; i++) {
  // when we click on one of tabbs
  tabbs[i].onclick = function() {
    // if activeTab is true or active then we remove class from them
    if (document.querySelector(".tabs").querySelector(".tab.active")) {
      document.querySelector(".tabs").querySelector(".tab.active").classList.remove('active');
      activeContent.classList.remove('active');
    }
    // and past it to another tab and add classes to tab and to his content
    this.classList.add("active");
    activeContent.classList.add("active");
    // when we click on tab he will throw Attribute get 'data-id' and past content of that tab
    tabAttribute(this.getAttribute('data-id'));
  }
}
// with this method we'll hide all contents of tab
function tabAttribute(element) {
  console.log(document.querySelector('#' + element));
  // first we have to hide all contents
  for (i = 0; i < contents.length; i++) {
    contents[i].classList.remove("active"); //hide all 
    //preko querySelector uzecemo id i element(tabContent1,tabContent2)
    document.querySelector("#" + element).classList.add("active");
  }