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").hide().html("<h1>DEFAULT</h1><p>This is the default view</p>").fadeIn('slow');
        $("#page1").click(function () {
            // load home page on click
            $("#response").hide().html("<h1>Page 1</h1><p>Page 1 has been loaded</p>").fadeIn('slow');
        });
        $("#page2").click(function () {
            // load about page on click
            $("#response").hide().html("<h1>Page 2</h1><p>Page 2 has been loaded</p>").fadeIn('slow');
        });
        $("#page3").click(function () {
            // load contact form onclick
            $("#response").hide().html("<h1>Page 3</h1><p>Page 3 has been loaded</p>").fadeIn('slow');
        });
        $("#page4").click(function () {
            // load contact form onclick
            $("#response").hide().html("<h1>Page 4</h1><p>Page 4 has been loaded</p>").fadeIn('slow');
        });
        $("#page5").click(function () {
            // load contact form onclick
            $("#response").hide().html("<h1>Page 5</h1><p>Page 5 has been loaded</p>").fadeIn('slow');
        });
    });