JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/isocra/TableDnD/master/js/jquery.tablednd.js"></script>
<table id="tblData">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Maria Anders</td>
    <td>30</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Francisco Chang</td>
    <td>24</td>
    <td>Mexico</td>
  </tr>
  <tr class="nodrag">
    <td>Roland Mendel</td>
    <td>100</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Helen Bennett</td>
    <td>28</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Yoshi Tannamuri</td>
    <td>35</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Giovanni Rovelli</td>
    <td>46</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>Narendra Sharma</td>
    <td>56</td>
    <td>India</td>
  </tr>
  <tr class="nodrop">
    <td>Alex Smith</td>
    <td>59</td>
    <td>USA</td>
  </tr>
</table>

CSS

body {
  font-family: arial, sans-serif;
  font-size: 14px;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

th {
  background-color: #dddddd;
}

.even {
  background-color: #ecf6fc;
}

.odd {
  background-color: #ddeedd;
}

.myDragClass {
  background-color: yellow;
  font-size: 16pt;
}
.nodrag {
  background-color: lightblue;
}

.nodrop {
  background-color: red;
}

JavaScript

$(document).ready(function() {
  var iCnt = 1;
  $("#tblData tr").each(function() {
     var id = "tr" + parseInt(iCnt);
     $(this).attr("id", id);
     iCnt++;
  });
  $("#tblData").find("tr:even").addClass("even");
  $("#tblData").find("tr:odd").addClass("odd");
  $("#tblData").tableDnD({
    onDragClass: "myDragClass",
    onDrop: function(table, row) {
      $("#tblData").find("tr").removeClass("even odd");
      $("#tblData").find("tr:even").addClass("even");
      $("#tblData").find("tr:odd").addClass("odd");
    }
  });
});