JSFiddle - React, Tailwind, and code Playground

HTML

<button id="btnSorter">Sort</button>
<div id="studio" class="brick">
    <div class="listlist">
        <h3 class="title">Studio</h3>
        <ul class="list">
            <li class="odd">
                <a href="#"><span class="title">strawberry</span></a>
            </li>
            <li class="even">
                <a href="#"><span class="title">Apple</span></a>
            </li>
            <li class="odd">
                <a href="#"><span class="title">Cat</span></a>
            </li>
            <li class="even">
                <a href="#"><span class="title">Dar</span></a>
            </li>
            <li class="odd">
                <a href="#"><span class="title">Cat</span></a>
            </li>
            <li class="even">
                <a href="#"><span class="title">Bar</span></a>
            </li>
            <li class="odd">
                <a href="#"><span class="title">apple</span></a>
            </li>
        </ul>
    </div>
</div>

CSS

li{
    list-style:none;
    margin:0;
    padding:0;
}
li a, span
{
    width:100%;
    text-decoration:none;
    display:inline-block;
    color:#333;
}
.odd{ background:#E7FFE9 }
.even{ background:#E0BBDE }

JavaScript

$(function(){
    $('#btnSorter').on('click', sorter)
});
// Sorter
function sorter(){
    var arr=[], len=$('.brick').find('ul.list li').length; 
    $('.brick ul.list li').each(function(i) {
        var el=$(this).find('a span').text();
        arr.push(el);
        if(i==(len-1))
        {
            arr=sortAlpha(arr);
            var ul=$(this).closest('ul.list').empty();
            $.each(arr, function(k, v){
                var cls=(k%2) ? 'even':'odd',
                li=$('<li/>', {'class':cls}),
                a=$('<a/>',{'href':'#'}).append($('<span/>', {'class':'title'}).text(v));
                ul.append(li.append(a));
            });
        }
    });    
}    
// Sort helper
function sortAlpha(list){
    var result = [], map = [];
    for (var i=0, length = list.length; i < length; i++) {
        map.push({ index: i, value: list[i].toLowerCase() });
    }
    map.sort(function(a, b) {
      return a.value > b.value ? 1 : -1;
    });
    for (var i=0, length = map.length; i < length; i++) {
      result.push(list[map[i].index]);
    }
    return result;
}