JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container clearfix">
    <div class="nav">
        <ul class="outline">
            <li><a href="#contact" data-target="#contact">Contact Us</a></li>
            <li><a href="#products" data-target="#products">Products</a></li>
            <li><a href="#offices" data-target="#offices">Offices</a></li>
        </ul>
    </div>
    <div class="main">
        <div id="contact" class="content">
            <h2>Contact Us</h2>
            <ul>
                <li>
                    <a href="#">How to reach us</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>
                    <a href="#">How to email us</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>
                    <a href="#">Contact Number</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
        </div>
        <div id="products" class="content">
            <h2>Products</h2>
            <p>Purus tortor cras nunc adipiscing cursus ut sociis placerat mattis non montes aliquam aliquet cursus porttitor porta tortor duis porttitor odio. Pid, sit aliquam? Lorem augue eu magnis egestas vut sagittis elit rhoncus massa egestas sociis, in pulvinar a amet, ut adipiscing. Nascetur turpis, turpis pulvinar eu sit.</p>
        </div>
        <div id="offices" class="content">
            <h2>Offices</h2>
            <ul>
                <li>Office 1</li>
                <li>Office 2</li>
                <li>Office 3</li>
            </ul>
        </div>
    </div>
</div>
<div class="footer">
    Footer
</div>

CSS

.clearfix:before,
.clearfix:after {
    content: " "; 
    display: table;
}

.clearfix:after { clear: both; }

.nav,
.main { box-sizing: border-box; }

.nav {
    float: left;
    width: 30%;
    margin-right: 20px;
    background-color: #ccc;
}

.main {
    float: left;
    width: 60%;
}

.footer {
    background-color: blue;
    color: white;
}

.hide { display: none; }

JavaScript

$(document).ready(function() {
    $('.content').addClass('hide');
    
    $('.outline a').on('click', function(e) {
        e.preventDefault();
        $('.content').addClass('hide');
        var showContent = $(this).data('target'),
            selector = '.content' + showContent;
        $(selector).removeClass('hide');
    });
});