JSFiddle - React, Tailwind, and code Playground

HTML

<div class="result-content">

</div>

CSS

body {
background: url('');
}
table {
    background: rgba(255,255,255,0.1);
    color: #000;
    margin: auto;
    width: auto;
}

table td {
    border: 1px solid rgba(0,0,0,0.2);
    color: #000;
    padding: 10px;
    text-align: center;
}

table td.affected {
    background: #c51200;
    color: #fff;
    font-family: 'Segoe Ui Semibold';
}

table td.iteration {
    background: #616161;
    color: #fff;
}

.result-content {
    position: relative;
    height: 100%;
    width: 100%;
}

.result-content h1 {
    margin: 20px auto;
}

JavaScript

var anada = {};
anada.vars = {
    $list: new Array(4,3,2,1,9,8,7,6,5,32,21,45),
    $elements: new Array()
}
anada.app = {
    pushElements: function(rows) {
        anada.vars.$elements.push(rows);
    },
    generateTable: function(tableName, title) {
        $('.result-content').empty().append('<h1>'+ title +'</h1><table id="' + tableName + '">');
        $.each(anada.vars.$elements, function(n, val) {
            $('.result-content').find('table').append(val);
        });
        anada.vars.$elements = [];
        
    },
    generateIterationList: function(list) {
        var row = '<tr>';
        $.each(list, function(key, value){
           row += '<td class="iteration">' + value;
        });
        anada.app.pushElements(row);
    }
    
}

anada.sort = {
    shell: function() {
        var list = anada.vars.$list;
        $.each(list, function(key, value){
            if (!isNaN(list[key])) {
                list[key] = parseInt(list[key]);
            } else {
                
            }
        });
        var n = list.length;
        var increment = Math.floor(n / 2);
        var i;
        while (increment > 0) {
            for (i = increment; i < n; i++) {
                var temp = list[i];
                var j = i;
                while (j >= increment && list[j - increment] > temp) {
                    list[j] = list[j - increment];
                    j -= increment;
                }
                list[j] = temp;
                var rows = '<tr>';
                for (counter = 0; counter < n; counter++) {
                    if (counter > j - increment && counter < i + 1 && counter % increment == 0) {
                        rows += '<td class="affected">' + list[counter];
                    } else {
                        rows += '<td>' + list[counter];
                    }
                }
                anada.vars.$elements.push(rows);
            }
            increment = Math.floor(increment / 2);
            var row =...