JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
    <ul id="navigationWraper">
        <li><a href="#" class="menuLink">Home</a>

        </li>
        <li><a href="#" class="menuLink">About Us</a>

        </li>
        <li><a href="#" class="menuLink">Services</a>

        </li>
        <ul class="submenu">
            <li>asdasd</li>
            <li>asdasdas</li>
            <li>derwer</li>
        </ul>
        <li><a href="#" class="menuLink">Shop</a>

        </li>
        <li><a href="#" class="menuLink">Portfolio</a>

        </li>
        <li><a href="#" class="menuLink">Gallery</a>

        </li>
        <li><a href="#" class="menuLink">Contact Us</a>

        </li>
    </ul>
</div>
<div id="#pageWraper">
    <div class=".currentPage"></div>
</div>

CSS

#nav {
    position: relative;
    display: inline-block;
    float: left;
    width: 75%;
    min-height: 80px;
    background: red;
}
#navigationWraper {
    position: relative;
    display: inline;
    width: 100%;
    margin-bottom: none;
    height: auto;
}
#navigationWraper li {
    position: relative;
    display: block;
    padding: 20px 10px;
    float: left;
    background: red;
}
.current {
    color:red;
    background:yellow;
}

JavaScript

$(document).ready(function () {

    $('#pageWraper').css({
        'display': 'none'
    }).slideDown('fast');

    $("a.menuLink").on("click", function (event) {
        event.preventDefault();
        var $this = $(this);
        if (!$this.hasClass('current')) {
            var pageLink = $(this).attr('href');

            $(".currentPage").fadeOut('slow', function () {
                $("#pageWraper").load(pageLink);
            });

            $('#navigationWraper li a').removeClass('current');
            $this.addClass('current');
        }
    });

});