JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content"><div class="notification information png_bg">
                            <a class="close" href="#"><img alt="close" title="Close this notification" src="views/resources/images/icons/cross_grey_small.png"></a>
                            <div>
                                Displaying 1421 records in 143 pages with 10 per page.
                            </div>
                        </div>
<table id="sort">
<thead>
                                <tr>
                                   <th style="width: 4%"><input type="checkbox" class="check-all"></th>
                                   <th style="width: 4%">ID</th>
                                   <th style="width: 8%">Name</th>
                                   <th style="width: 22%">Short Desc</th>
                                   <th style="width: 12%">SKU</th>
                                   <th style="width: 6%">List Price</th>
                                   <th style="width: 6%">Sale Price</th>
                                   <th style="width: 6%"></th>
                                </tr>
                                
                            </thead>
                         
                            <tfoot>
                                <tr>
                                    <td colspan="8">
                                        <div class="bulk-actions align-left">
                                            <select name="dropdown">
                                                <option value="option1">Choose an action...</option>
                                                <option value="option2">Edit</option>
                                                <option value="option3">Delete</option>
                                            </select>
                                            <a href="#" class="button">Apply to selected</a>
                                        </div>
                                        <div...

CSS

div {
    cursor: pointer;
}
.drag { 
    background-color: #000; 
}

JavaScript

$(function() {
    $("#sort tbody").sortable({
        //helper: 'fixHelper',
        start: function(event, ui) {
            // change css here
            console.log(ui.item);
            ui.item.toggleClass('drag');
            alert(ui.item);
        },
        stop: function(event, ui) {
            // change css here
            ui.item.toggleClass('drag');
        }
    });
});