JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav show"><span>A</span></div>
<div class="nav"><span>B</span></div>
<div class="nav"><span>C</span></div>
<script>
    //get nav items
    var navElems = document.getElementsByClassName('nav');
    
    //attach click handler to each
    for (var i = 0; i < navElems.length; i++) {
        navElems[i].onclick = toggleVisible;
    }
    
    //handle click events
    function toggleVisible() {
        //hide currently shown item
        document.getElementsByClassName('show')[0].classList.remove('show');
        //show clicked item
        this.classList.add('show');
    }
</script>

CSS

div.nav { height: 30px; width: 100px; float: left; border: 1px solid gray; padding: 5px; }
div span { display: none; }
div.show span { display: inline; }