JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page-links">     
    <a class="plink active" href="#page1">About</a>
    <a class="plink" href="#page2">History</a>
    <a class="plink" href="#page3">Backstage</a> 
</div> 
<div id="page1" class='page active'> </div> 
<div id="page2" class='page'> </div> 
<div id="page3" class='page'> </div>

CSS

div.page
{
    height: 300px;
    display:none;
}
div.page.active
{
    display:block;
}
a.plink
{
    padding-left:5px;
    padding-right:5px;
}
a.plink.active
{
    background-color:#ddd;
}
div#page1
{
    background-color:blue;
}
div#page2
{
    background-color:green;
}
div#page3
{
    background-color:red;
}

JavaScript

$(document).ready(function() {
    $('a.plink').click(function() {
        var id = $(this).attr('href');
        $('.active').removeClass('active');
        $(this).addClass('active');
        $('div' + id).addClass('active');
    });
});