JSFiddle - React, Tailwind, and code Playground

by george_black

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<table id="sortable" width="1000" cellspacing="0" cellpadding="0" border="0" bgcolor="#FFFFFF" class="offers">
        <tbody><tr>
            <td valign="middle" height="58" bgcolor="333333" align="center" colspan="1">
                <font size="3" face="arial" color="ffffff">HOTEL NAME</font>	
            </td>
            <td width="300" valign="middle" height="58" bgcolor="333333" align="center" colspan="1">
                <font size="3" face="arial" color="ffffff">ACCOMMODATION TYPE</font>
            </td>
            <td valign="middle" height="58" bgcolor="333333" align="center" style="padding: 10px 0px;" colspan="1">
                <font size="3" face="arial" color="ffffff">AVERAGE DAILY RATE<br>
                PER ROOM IN EUROS</font>
            </td>
            <td valign="middle" bgcolor="333333" align="center" style="padding: 10px 0px;" colspan="1" class="discount">
                <font size="3" face="arial" color="ffffff">
            </font></td>

            <td valign="middle" height="58" bgcolor="333333" align="center" colspan="1">
                <font size="3" face="arial" color="ffffff">OFFICIAL WEBSITE</font>
            </td>
        </tr>
                    <tr class="hotel_0">
                <td valign="middle" align="left" style="border-left: 1px solid #cccccc;border-bottom: 1px solid #cccccc;padding: 10px;" class="hotel_0">
                    <font size="3" face="arial" color="000000" style="padding-left:10px;" class="hotel"><div class="editable">Andronis Luxury Suites</div></font>
                </td>
                <td valign="top" align="left" style="border-bottom: 1px solid #cccccc;" class="hotel_0">
                    <br>
                                            <font size="2" face="arial" color="000000" id="room_name_0" class="list">Pool Suite with Infinity Pool<br></font>
                                 ...

CSS

#sortable td{border:1px solid #000;width:333px}

JavaScript

$("#sortable tbody").sortable({
    stop: function(event, ui) {
        alert("New position: " + ui.item.index());
    }
});
$("#sortable tbody").disableSelection();