JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outline">
    <div id="header">
        <div id="familyH">Family</div>
        <div id="friendsH">Friends</div>
    </div>
    <hr/>
    <div id="body">
        <div id="family">
            <div>Family Stuff</div>
        </div>
        <div id="friends">
            <div>Friends Stuff</div>
        </div>
    </div>
</div>

CSS

#outline {
    border:1px solid;
    width: 150px;
    height: 300px;
}

#header {
    padding-top: 10px;
    height: 25px;
    text-align: center;
}

#familyH {
    float: left;
    width: 74.5px;
    height: 25px;
    border-right: 1px solid;
    font-weight: bold;
}

#friendsH {
    float: right;
    width: 75px;
    height: 25px;
}

#family {
    display: block;
    width: 74.5px;
    height: 25px;
}

#friends {
    display: none;
}

JavaScript

$(document).ready(function() {
    $("#familyH").on( "click", function () {
        $("#family").css( "display","block" );
        $("#friends").css( "display","none" );
        $("#familyH").css( "font-weight","bold" );
        $("#friendsH").css( "font-weight","normal" );
    }); 
    $("#friendsH").on( "click", function () {
        $("#friends").css( "display","block" );
        $("#family").css( "display","none" );
        $("#friendsH").css( "font-weight","bold" );
        $("#familyH").css( "font-weight","normal" );
    }); 
});