JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tabs">
        <div id="nav">
            
            <a href="#tabs-1">And the link</a>
            <a href="#tabs-2">This Link</a>
            <a href="#tabs-3">Last Linky Poo</a>
            
        </div>
        
        <div id="content">
            <div id="tabs-1">
                <p>Here is the first tabs</p>
                <h2>first nav</h2>
                <p>Here is some textx</p>
            </div>
            <div id="tabs-2">
                <p>Here is the second tabs</p>
                <h2>Another header</h2>
                <p>Para: Second nav</p>
            </div>
            <div id="tabs-3">
                <p>Here is the third tabs</p>
                <h2>Yet Another</h2>
                <p>Para:Third nav</p>
            </div>
        </div>
    <script type="text/javascript" src="tabsStart.js"></script>

CSS

#nav a {
    display:block;
}

#tabs {
    width:400px;
    overflow:hidden
}

#content {
    width:1200px;
}

#content div {
    float:left;
    width:400px
}

JavaScript

var nav = document.getElementById('nav');
var navLinks = nav.getElementsByTagName('a');
var content = document.getElementById('content');
var contentSections = content.getElementsByTagName('div');


for(i =0; i < contentSections.length; i++) {
    contentSections[i].style.display = 'none';
}

for(i =0; i < navLinks.length; i++) {
    navLinks[i].onmouseover = function() {
    contentSections[i-1].style.display = 'block'
    }
}