JSFiddle - React, Tailwind, and code Playground

by mowglisanu

HTML

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

<div id="main">
    <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;
}
#main{
    display:none;
}

JavaScript

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