JSFiddle - React, Tailwind, and code Playground

by Routh

HTML

<div class="menu">
    <ul>
        <li><a href="#tabs-1" id="page1" class="tab">page 1</a>

        </li>
        <li><a href="#tabs-2" id="page2" class="tab">page 2</a>

        </li>
        <li><a href="#tabs-3" id="page3" class="tab">page 3</a>

        </li>
        <li><a href="#tabs-4" id="page4" class="tab">page 4</a>

        </li>
        <li><a href="#tabs-5" id="page5" class="tab">page 5</a>

        </li>
    </ul>
</div>
<div class="contentarea" id="response"></div>

CSS

li {
    display: inline-block;
    margin-right: 2px;
}
li a {
    border: 1px solid #666;
    padding: 4px;
}

JavaScript

$(document).ready(function () {
        // load index page when the page loads
        $("#response").html("DEFAULT");
        $("#page1").click(function () {
            // load home page on click
            $("#response").html("TESTING 1");
        });
        $("#page2").click(function () {
            // load about page on click
            $("#response").html("TESTING 2");
        });
        $("#page3").click(function () {
            // load contact form onclick
            $("#response").html("TESTING 3");
        });
        $("#page4").click(function () {
            // load contact form onclick
            $("#response").html("TESTING 4");
        });
        $("#page5").click(function () {
            // load contact form onclick
            $("#response").html("TESTING 5");
        });
    });