JSFiddle - React, Tailwind, and code Playground

HTML

<section class="userview-right" id="tabs">
			<h1>Words</h1>
			<ul id="tabs-nav">
			    <li><a href="#tabs-1">list 1</a></li>
			    <li><a href="#tabs-2">list 2</a></li>
			    <li><a href="#tabs-3">Deleted</a></li>
			</ul>


			<ol id="tabs-1" class="word-list">
				<li class="ui-state-default">
					list 1
				</li>
			</ol>

			<ol id="tabs-2" class="word-list">
				<li class="ui-state-default">
					list 2
				</li>
			</ol>

			<ol id="tabs-3" class="word-list">
				<li class="ui-state-default">
					deleted
				</li>
			</ol>
		</section>

JavaScript

$(".word-list").sortable({
    	tolerance: 'pointer',
        cursor: 'move',
        forcePlaceholderSize: true,
        dropOnEmpty: true,
        connectWith: 'ol.word-list',
      	placeholder: "ui-state-highlight"
}).disableSelection();

    // Words tabs
    var $tabs = $("#tabs").tabs();

    // Make tab names dropable
    var $tab_items = $("#tabs-nav li", $tabs).droppable({
      accept: ".word-list li",
      hoverClass: "ui-state-hover",
        tolerance: 'pointer',
      drop: function(event,ui) {
        var $item = $(this);
        var $list = $($item.find("a").attr("href")).find(".word-list");
 
        ui.draggable.hide("fast", function() {
          $tabs.tabs("option", "active", $tab_items.index($item));
          $(this).appendTo($list).show("slow");
        });
      }
      /*over: function(event,ui) {
        var $item = $(this);
        var $list = $($item.find("a").attr("href")).find(".word-list");

        $tabs.tabs("option", "active", $tab_items.index($item));
        ui.draggable.appendTo($list).show("slow");
      }*/
    });