JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <a href="#about">About</a> |
    <a href="#gallery">Gallery</a> |
    <a href="#contact">Contact</a>
</nav>

<div id="main" class="hide">
    <div id="about">
        <p>This is the about section.</p>
    </div> <!-- #about -->
    <div id="gallery">
        <p>This is the gallery section.</p>
    </div> <!-- #gallery -->
    <div id="contact">
        <p>This is the contact section.</p>
    </div> <!-- #contact -->
</div> <!-- main -->

CSS

.hide {
    display:none;
}

JavaScript

$(function() {
    $('#main').hide();
});
  
$('body').on('click','nav a', function(e) {
    $('#main').show();
    $('#main').children().hide();
    $($(this).attr('href')).show();
    e.preventDefault();
});