JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <nav class="main-nav">
        <ul>
            <li><a href="#home" class="active">Home</a>
            </li>
            <li><a href="#about">About</a>
            </li>
            <li><a href="#contact">Contact</a>
            </li>
        </ul>
    </nav>
    <!-- Home Page -->
    <div id="contentSections">
    <section class="content show" id="home">
        	<h1>Welcome</h1>

        	<h5>My site is coming soon!</h5>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum urna eget eros scelerisque, consectetur lacinia velit egestas. Aliquam erat volutpat. Donec aliquam ornare dignissim. Vestibulum pellentesque leo id purus cursus ullamcorper. Fusce viverra luctus erat. Integer ornare est eu mauris consectetur consequat. Integer sollicitudin justo a mi cursus rhoncus. Proin et orci blandit, tincidunt ante eu, dictum ligula. Proin mollis semper turpis et mollis. Vestibulum ut molestie metus, eu pulvinar lorem.</p>
    </section>
    <!-- About Page -->
    <section class="content" id="about">
        	<h1>About</h1>

        	<h5>Here's a little about what I'm up to.</h5>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum urna eget eros scelerisque, consectetur lacinia velit egestas. Aliquam erat volutpat. Donec aliquam ornare dignissim. Vestibulum pellentesque leo id purus cursus ullamcorper. Fusce viverra luctus erat. Integer ornare est eu mauris consectetur consequat. Integer sollicitudin justo a mi cursus rhoncus. Proin et orci blandit, tincidunt ante eu, dictum ligula. Proin mollis semper turpis et mollis. Vestibulum ut molestie metus, eu pulvinar lorem.</p>
    </section>
    <!-- Contact Page -->
    <section class="content" id="contact">
        	<h1>Contact</h1>

        	<h5>Get in touch.</h5>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum urna eget eros scelerisque, consectetur lacinia velit egestas. Aliquam erat volutpat....

CSS

body {
    background-color:#000000;
    color: #ffffff;
}
.main-nav ul li {
    list-style: none;
    display: inline;
    padding-right: 10px;
    padding-left: 10px;
    border-left: 1px solid #b7b7b7;
}
.main-nav ul li a.active {
    color: #ffa800;
}
a {
    color: #b7b7b7;
    text-decoration:none;
    font-weight: normal;
}
.content {
    display: none;
}
.show {
    display: block;
}

JavaScript

jQuery(document).ready(function () {

    

    /* Main Navigation Clicks */
    jQuery('.main-nav ul li a').click(function () {
        var link = jQuery(this).attr('href').substr(1);
        

        if (!jQuery('section.content.show, section#' + link).is(':animated')) {
            jQuery('.main-nav ul li a').removeClass('active'); //remove active
            jQuery('section.content.show').addClass('show').animate({
                'opacity': 0
            }, {
                queue: false,
                duration: 1000,
                complete: function () {
                    jQuery('a[href="#' + link + '"]').addClass('active');
                    // add active
                    
                    jQuery('#contentSections section').removeClass('show');
                                        
                    jQuery('section#' + link).addClass('show').animate({
                        'opacity': 1
                    }, {
                        queue: false,
                        duration: 1000
                    });
                }
            });
        }
    });

});