JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li><a href="#1" id="pg1">Page 1</a></li>
        <li><a href="#2" id="pg2">Page 2</a></li>
    </ul>
</nav>
<div id="content-wrapper">
    <div id="contentarea-1">
        <wbr><p>FIRST PAGE</p></wbr>
    </div>
    <div id="contentarea-2">
        <wbr><p> SECOND PAGE</p></wbr>
    </div>
    <div id="clear"></div>
</div>

CSS

#content-wrapper{
    margin-left: 50px;
}
#contentarea-1{
    width: 450px;
}

#contentarea-2{
    width: 450px;
    display:none;
}

#clear{
    clear: both;
}

nav{
    text-align: center;
}

nav ul{
    list-style: none;
}

nav ul li{
    display: inline-block;
    padding: 15px;
}

JavaScript

$(function() {txt1 = $("#contentarea-1").text();
txt2 = $("#contentarea-2").text();

$("#pg1").on('click', function () {
    $('#contentarea-2').hide();
    $('#contentarea-1').fadeOut(500, function () {
        $("#contentarea-1").hide(txt2);
        $('#contentarea-1').fadeIn(500);
    });
});

$("#pg2").on('click', function () {
    $('#contentarea-1').hide();
    $('#contentarea-2').fadeOut(500, function () {
        $("#contentarea-2").text(txt2);
        $('#contentarea-2').fadeIn(500);
    });
});
             });