JSFiddle - React, Tailwind, and code Playground

by honglonglong

HTML

<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/draggable/resources/demos/style.css">
<ul id="sortable">
    <li class="ui-state-default">Click to add a new picture1</li>
    <li class="ui-state-default">Click to add a new picture2</li>
    <li class="ui-state-default">Click to add a new picture3</li>
    <li class="ui-state-default">Click to add a new picture4</li>
</ul>

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
}
li {
    font-family:arial;
    color:darkgray;
    margin: 5px;
    padding: 5px;
    width: 20%;
    float:left;
    background-color: #dfdfdf;
    text-align:center;
    vertical-align:bottom;
    border: 3px dashed lightblue;
    color:
}

JavaScript

$("#sortable").sortable({
    revert: true
});

$("ul, li").disableSelection();

function resizeComponents() {
    var cw = $('.ui-state-default').width();
    $('.ui-state-default').css({
        'height': cw + 'px'
    });
}
$(window).resize(resizeComponents);
resizeComponents();