JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="nav">
        <ul>
            <li><a href="#">Home</a>

            </li>
            <li><a href="#projects">Projects</a>

            </li>
            <li><a href="#about">About</a>

            </li>
            <li><a href="#contact">Contact</a>

            </li>
        </ul>
    </div>
    <div id="main-area">
        <!-- Home page -->
        <div id="home">
             <h1>Home</h1>

        </div>
        <!-- Projects page -->
        <div id="projects">
             <h1>Projects</h1>

        </div>
        <!-- About page -->
        <div id="about">
             <h1>About</h1>

        </div>
        <!-- Contact page -->
        <div id="contact">
             <h1>Contact</h1>

        </div>
    </div>
</div>

CSS

#main-area {
    margin-top:20px;
}

#main-area > div
{
    display: none;
}

JavaScript

$(window).on("hashchange", function(e) {
    $(location.hash.length > 1 ? location.hash : "#home").child().hide().end().show();
}).trigger("hashchange");