JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tabbed">
<a href="#" id="tabe1">Tabe1</a>
    <div class="section" id="tabe1content">
            <div>
        <p> content1 </p>   
        </div>
    </div>
    <a href="#" id="tabe2">Tabe2</a>
    <div class="section" id="tabe2content">
            <div>
        <p> content2 </p>   
        </div>
    </div>
    <a href="#" id="tabe3">Tabe3</a>
    <div class="section" id="tabe3content">
            <div>
        <p> content3 </p>   
        </div>
    </div>
 </div>

CSS

.section{
    position:absolute;
    float:left;
    width:500px;
    background-color:gray;
    left:0;
    top:0;
    height:300px;
    margin-top:30px;
    z-index: 1;
}
#tabbed{
    position:relative;
}
a {
    margin-right:10px;
    float:left;
    display:block;
}

JavaScript

var root = document.getElementById("tabbed");
var veryTop = 2;

root.onclick = handleClick;

function handleClick(e){
    var target = e.target;
    if ( target.tagName !== 'A' ) { e.preventDefault(); return; }
    var tab = document.getElementById( target.id + 'content' );
    tab.style.zIndex = ( veryTop++ ).toString();
    e.preventDefault();
}