JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.8.22/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.22/themes/base/jquery-ui.css">
<div id="accordion">
    <div class="group">
        <h3><a href="#">Section 1</a></h3>
        <div>
            <p>words</p>
        </div>
    </div>
    <div class="group">
        <h3><a href="#">Section 2</a></h3>
        <div>
            <p>words</p>
        </div>
    </div>
    <div class="group">
        <h3><a href="#">Section 3</a></h3>
        <div>
            <p>words</p>
        </div>
    </div>
    <div class="group">
        <h3><a href="#">Section 4</a></h3>
        <div>
            <p>words</p>
        </div>
    </div>
</div>

CSS

/* IE has layout issues when sorting (see #5413) */
.group { zoom: 1 }

JavaScript

$(function() {
    $("#accordion").accordion({
        header: "> div > h3"
    }).sortable({
        axis: "y",
        distance: 6,
        handle: "h3",
        stop: function(event, ui) {
            // IE doesn't register the blur when sorting
            // so trigger focusout handlers to remove .ui-state-focus
            ui.item.children("h3").triggerHandler("focusout");
        }
    });
});