JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="myUL">
    <li class="A">abb</li>
    <li class="B">dbb</li>
    <li class="C">abb</li>
    <li class="C">zbb</li>
    <li class="B">ybb</li>
    <li class="C">abb</li>
    <li class="C">zab</li>
    <li class="C">zbb</li>
        
    <li class="A">cbb</li>
    <li class="B">bbb</li>
    <li class="C">abb</li>
    <li class="C">cbb</li>
    
    <li class="A">xbb</li>
    
    <li class="A">zbb</li>
</ul>

JavaScript

var mylist = $('#myUL');
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
   return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})
$.each(listitems, function(idx, itm) {
    mylist.append(itm); 
});