JSFiddle - React, Tailwind, and code Playground

by Riccal

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<div id ="left-panel">
<div>
<div class="allstacks">
    <div class="stack">
        <ul class="stack_items">
            <li class="item">
                    <p class="title">Title A</p>
            </li>
            <li class="item">
                    <p class="title">Title B</p>
            </li>
            <li class="item">
                    <p class="title">Title C</p>
            </li>
        </ul>
    </div>
    <div class="stack">
        <ul class="stack_items">
            <li class="item">
                    <p class="title">Title X</p>
            </li>
            <li class="item">
                    <p class="title">Title Y</p>
            </li>
            <li class="item">
                    <p class="title">Title Z</p>
            </li>
        </ul>
    </div>
    <div class="stack">
        <ul class="stack_items">
            <li class="item">
                    <p class="title">Title 1</p>
            </li>
            <li class="item">
                    <p class="title">Title 2</p>
            </li>
            <li class="item">
                    <p class="title">Title 3</p>
            </li>
        </ul>
    </div>
    <div class="stack">
        <ul class="stack_items">
            <li class="item">
                    <p class="title">Title @</p>
            </li>
            <li class="item">
                    <p class="title">Title $</p>
            </li>
            <li class="item">
                    <p class="title">Title #</p>
            </li>
        </ul>
    </div>
    <div class="stack">
        <ul class="stack_items">
            <li class="item">
                    <p class="title">Title 9</p>
            </li>
            <li class="item">
                    <p class="title">Title 10</p>
            </li>
            <li class="item">
                    <p class="title">Title 11</p>
            </li>
       ...

CSS

#left-panel{
   position: relative;
    float: left;
    width: 80%;
   background-color: #ddd;
   height: 92%;
   overflow: auto;    
}
#left-panel>div{
    width: 100%;
    height:100%;
}
div.allstacks{
        width: 100%;
        height: 95%;
        white-space: nowrap; 
    }
    div.stack {
        width: 230px;
        height: 90%;
        display: inline-block;
        margin-left: 2%;
        margin-top: 1%;
    }

ul.stack_items{
    clear: both;
    float: left;
    padding: 2.5% 3% 1% 3%;
    background-color: #ccc;
    width: 94%;
    list-style: none;
    }
li.item {
    background-color: white;
    padding: 10px;
    padding-top: 5px;
    height: 70px;
    margin-bottom: 2%;
    cursor: pointer;
}

.over{
    border:  2px solid #444;    
}

JavaScript

var zindex = 10; 
$(".item").draggable({
    containment: "body",
    scroll: true,
    revert: function (event, ui) {
        $(this).css("border", "none");
        return !event;
   },
    start: function (event, ui) {
        $(this).css("z-index", zindex++);
        $(this).css("border", "2px solid #333");
    }
});

 $(".stack_items").droppable({
    hoverClass: "over",
    drop: function (event, ui) {
        $("<li class='item'></li>").html(ui.draggable.html()).appendTo(this);
        $(ui.draggable).remove();
    }
});