JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tabs rrmodule">
    <h3>Popular</h3>
    <ul class="mostpopular">
        <li><a href="#">Most Viewed</a></li> 
        <li><a href="#">Most Commented</a></li>
    </ul>
    
    <div>
        Some content - tab 1
    </div>
    <div>
        Some content - tab 2
    </div>
</div>

JavaScript

var SwitchTabs = function(container, tabs, activeclass, tab) {   
    var tabContainers = $(container + ' > div');
    var index = 0;
    var tabnum = (tab) ? parseInt(tab, 0) - 1 : 0;
    tabContainers.filter(':eq(' + tabnum + ')').css({
        'display': 'block'
    });

    $(container + ' > ' + tabs).find('a').click(function() {
        index = $(this).parent().index();
        tabContainers.css({
            'display': 'none'
        }).filter(':eq(' + index + ')').show();
        $(container + ' ' + tabs + ' ' + ' a').removeClass(activeclass);
        $(this).addClass(activeclass);
    }).filter(':eq(' + tabnum + ')').click();
};

$(function() {
    SwitchTabs('div.tabs', 'ul.mostpopular', 'active', 1);
});