JSFiddle - React, Tailwind, and code Playground

HTML

<p class="tab-text" id="home">HOME TEXT!!!</p>
<p class="tab-text" id ="about">ABOUT TEXT!!!</p>
        
        <h1>Little Shop </h1>
        
        <ul id="tabs">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
        </ul>

<script>
// Run when document is ready
(function() {
    // Find the UL parent of the tab links
    var tabs = document.getElementById('tabs');
    // Find all links inside it
    var tabLinks = tabs.getElementsByTagName('a');
    
    // Iterate through them and give them a click event handler
    for (var i = 0; i < tabLinks.length; i++)
    {
        tabLinks[i].onclick = function() {
            // Iterate over all the elements with a class of tab-text and hide them initially
            [].forEach.call(document.getElementsByClassName("tab-text"), function(el) {
              el.style.display = 'none';
            });
            
            // Then find the element whose ID matches the href attribute of the link clicked and show that
            document.getElementById(this.href.split('#')[1]).style.display = 'block';
                                        
            return false;
        }
    }
})();
</script>

CSS

.tab-text { display:none; }