JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tabs">
    <div id="tabs-1">
         <h3>A</h3>

        <div>
            <ul id="sortable1" class="connectedSortable ui-helper-reset">
                <li class="ui-state-default">Item 1</li>
                <li class="ui-state-default">Item 2</li>
                <li class="ui-state-default">Item 3</li>
                <li class="ui-state-default">Item 4</li>
                <li class="ui-state-default">Item 5</li>
            </ul>
        </div>
    </div>
    <div id="tabs-2">
         <h3>B</h3>

        <div>
            <ul id="sortable2" class="connectedSortable ui-helper-reset">
                <li class="ui-state-highlight">Item 1</li>
                <li class="ui-state-highlight">Item 2</li>
                <li class="ui-state-highlight">Item 3</li>
                <li class="ui-state-highlight">Item 4</li>
                <li class="ui-state-highlight">Item 5</li>
            </ul>
        </div>
    </div>
</div>

JavaScript

$(function() {
    $( "#sortable1, #sortable2" ).sortable({connectWith:['.connectedSortable']}).disableSelection();

    var $tabs = $( "#tabs" ).accordion({
        heightStyle: "content",
        collapsible: true,
        header: "> div > h3",
        beforeActivate: function(event, ui) {
         // The accordion believes a panel is being opened
        if (ui.newHeader[0]) {
            var currHeader  = ui.newHeader;
            var currContent = currHeader.next('.ui-accordion-content');
         // The accordion believes a panel is being closed
        } else {
            var currHeader  = ui.oldHeader;
            var currContent = currHeader.next('.ui-accordion-content');
        }
         // Since we've changed the default behavior, this detects the actual status
        var isPanelSelected = currHeader.attr('aria-selected') == 'true';

         // Toggle the panel's header
        currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));

        // Toggle the panel's icon
        currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);

         // Toggle the panel's content
        currContent.toggleClass('accordion-content-active',!isPanelSelected)    
        if (isPanelSelected) { currContent.slideUp(); }  else { currContent.slideDown(); }

        return false; // Cancel the default action
    }
    })
});