JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tab1" class="tabs">
    <a href="#">Tab 1</a>
    
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

<div id="tab2" class="tabs">
    <a href="#">Tab 2</a>
    
    <ul>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>

CSS

body {
    font-family: Arial;
    font-size: 13px;
    line-height: 16px;
}

.tabs a {
    background-color: #dedede;
    color: #565656;
    display: block;
    margin-bottom: 5px;
    padding: 5px 8px;
    text-decoration: none;
}

.tabs ul {
    margin: 0 0 10px;
    padding: 0;
}

.tabs li {
    background-color: #eee;
    border: 1px solid #ccc;
    color: #1a1a1a;
    display: none;
    border-radius: 5px;
    margin-bottom: 1px;
    padding: 5px 10px;
}

JavaScript

$(function() {
    
    // A helper function that allows multiple LI elements to be either
    // faded in or out or slide toggled up and down
    function fadeOutItems(ele, delay) {
        var $$ = $(ele), $n = $$.next();
        
        // Toggle the active class
        $$.toggleClass('active');
        
        // Ensure the next element exists and has the correct nodeType
        // of an unordered list aka "UL"
        if ($n.length && $n[0].nodeName === 'UL') {
            $('li', $n).each(function(i) {
                // Determine whether to use a fade effect or a very quick
                // sliding effect
                delay ? $(this).delay(i * 400).fadeToggle('slow') : $(this).slideToggle('fast');
            });
        }
    }
    
    // Retrieves the URL parameters from the window object and allows
    // for custom query parameter requests by name
    function getParameterByName(name) {
        name = name.replace(/[\[]/, '\\\[').replace(/[\]]/, '\\\]');
        
        var regexS  = '[\\?&]' + name + '=([^&#]*)';
        var regex   = new RegExp(regexS);
        var results = regex.exec(window.location.href);
        
        if (results === null) {
            return false;
        } else {
            return decodeURIComponent(results[1].replace(/\+/g, ' '));
        }
    }
    
    // This is the jQuery event that controls the click event for the
    // tabs on the page by using a class to cut down on code
    $('a', '.tabs').click(function(e) {
        e.preventDefault();
        
        // Check on the other tabs, if the anchor link contains the
        // class "active" fade out the UL list items
        var $ca = $('a.active', '.tabs');
        
        if ($ca.length) {
            // Check the currently selected tab against the one just clicked,
            // if they are the same end the code right here!
            if ($(this).parent().attr('id') === $ca.parent().attr('id')) {
                return false;
            }
       ...