JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="mytabs" id="tabs">
    <li class="current"><a href="./tabs/tab1.php">Tab 1</a>

    </li>
    <li><a href="./tabs/tab2.php">Tab 2</a>

    </li>
    <li><a href="./tabs/tab3.php">Tab 3</a>

    </li>
</ul>
<div style="clear: both;"></div>
<div class="mytabs-container" id="tabs-container">Loading. Please Wait...</div>

CSS

body {
    font-family: arial;
    background-color: #fefefe;
    margin: 0px;
    padding: 10px;
}
ul, li {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
li {
    background-color: #eee;
    margin: 1px;
    width: 100px;
    float: left;
    text-align: center;
}
li:hover {
    background-color: #aae0f6;
}
li.current {
    background-color: #72c8ec;
}
li a {
    text-decoration: none;
    text-decoration: none;
    color: #888;
}
.mytabs-container {
}

JavaScript

var containerId = '#tabs-container';

$(document).ready(function () {
    if ($('li.current a').length > 0) {
        loadTab($('li.current a'));
    }

    $('li a').click(function () {
        if ($(this).parent().hasClass('current')) {
            return false;
        }

        $('li.current').removeClass('current');
        $(this).parent().addClass('current');

        loadTab($(this));
        return false;
    });
});

function loadTab(tabObj) {
    if (!tabObj || !tabObj.length) {
        return;
    }
    $(containerId).addClass('loading');
    $(containerId).fadeOut('fast');

    $(containerId).load(tabObj.attr('href'), function () {
        $(containerId).removeClass('loading');
        $(containerId).fadeIn('fast');
    });
}