JSFiddle - React, Tailwind, and code Playground

by Aleksandra Strelkova

HTML

<div id="person_tab">
<a href="#tab1">link num 1</a>
<a class="active" href="#tab2">link num 2</a>
</div>
<div id="person_tab_container">
<div id="tab1">
with tab num 1frjzxrtjzjtrjztfjrtsbdfgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggwith tab num 1frjzxrtjzjtrjztfjrtsbdfgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggwith tab num 1frjzxrtjzjtrjztfjrtsbdfgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggwith tab num 1frjzxrtjzjtrjztfjrtsbdfgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggwith tab num 1frjzxrtjzjtrjztfjrtsbdfgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggwith tab num 1frjzxrtjzjtrjztfjrtsbdfgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggwith tab num 1frjzxrtjzjtrjztfjrtsbdfgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggwith tab num 1frjzxrtjzjtrjztfjrtsbdfgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggwith tab num 1frjzxrtjzjtrjztfjrtsbdfgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggwith tab num 1frjzxrtjzjtrjztfjrtsbdfgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggwith tab num 1frjzxrtjzjtrjztfjrtsbdfgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggwith tab num 1frjzxrtjzjtrjztfjrtsbdfgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggwith tab num 1frjzxrtjzjtrjztfjrtsbdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
</div>
<div id="tab2"...

JavaScript

document.addEventListener('DOMContentLoaded', function(e){
    'use strict';
    //returns a list of all <a> elements in "person_tab" container
    var list = document.querySelectorAll('#person_tab a');
    //convert nodeList to Array
    list = Array.prototype.slice.call(list,0); 
    //for every element from array do next
    list.forEach(function(el, i, ar) {
        el.addEventListener('click', function(event){
            //the default action that belongs to the event will not occur
            e.preventDefault();
            var tab = document.querySelector(el.getAttribute('href'));

            //remove "active" class
            document.querySelector('#person_tab .active').classList.remove('active');
            document.querySelector('#person_tab_container .active').classList.remove('active');

            //set "active" to tab
            el.classList.add('active');
            tab.classList.add('active');
        })
    })
})