JSFiddle - React, Tailwind, and code Playground

HTML

Tab1 doesn't turn blue dragged between groups:
<ul class="group1">
    <li>Tab 1</li>
</ul>
<ul class="group1">
    <li>Tab 2</li>
</ul>
Tab1 DOES turns blue when dragged between groups:
<ul class="group2">
    <li>Tab 1</li>
</ul>
<ul class="group2">
    <li>Tab 2</li>
</ul>

CSS

ul {
    border: 1px solid black;
}

JavaScript

$('ul.group1').sortable({
    items: '> li',
    connectWith: 'ul.group1',
    out: function(event, ui) {
       ui.item.css({color: 'blue'});
    }
});

$('ul.group2').sortable({
    items: '> li',
    out: function(event, ui) {
       ui.item.css({color: 'blue'});
    }
});