JSFiddle - React, Tailwind, and code Playground

HTML

<script src='//code.jquery.com/ui/1.11.2/jquery-ui.js'></script>

<table class='table'><tr>
    <td><img src="https://www.hojko.com/download/file.php?avatar=34394_1376421397.png"/></td>
    <td><img src="https://www.hojko.com/download/file.php?avatar=6028_1325191688.gif"/></td>
    <td><img src="https://www.hojko.com/images/avatars/gallery/baby/baby167.jpg"/></td>
    </tr><tr>
    <td><img src="https://www.hojko.com/download/file.php?avatar=34394_1376421397.png"/></td>
    <td><img src="https://www.hojko.com/download/file.php?avatar=6028_1325191688.gif"/></td>
    <td><img src="https://www.hojko.com/images/avatars/gallery/baby/baby167.jpg"/></td>
    </tr><tr>
    <td><img src="https://www.hojko.com/download/file.php?avatar=34394_1376421397.png"/></td>
    <td><img src="https://www.hojko.com/download/file.php?avatar=6028_1325191688.gif"/></td>
    <td><img src="https://www.hojko.com/images/avatars/gallery/baby/baby167.jpg"/></td>
</tr></table>

CSS

.table{
    max-width: 320px;
    margin: 0 auto;    
}
img {
    max-width: 100%;
    height: auto;
}
.placeholder{
	border: 1px red solid;
}

JavaScript

/*var NewContent2 = "<td><img src='https://www.hojko.com/download/file.php?avatar=5439_1294832739.jpg'></td>";
$(".table").click(function () {
    $page = $(this).children("tbody");
    if ($(this).find("td").length % 3 == 0){
        $page.append("</tr><tr>");
    }
    $page.append(NewContent2);
});*/
$(document).ready(function() { 
    $(function() {
        $(".table tbody").sortable({
            placeholder: 'placeholder',
            helper: 'clone',
            items: 'td'
        }).disableSelection();
    });
});