JSFiddle - React, Tailwind, and code Playground

by arjuncc

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div class="column">
    <div class="portlet">
        <div class="portlet-header">Feeds</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
    <div class="portlet">
        <div class="portlet-header">News</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
</div>
<div class="column">
    <div class="portlet">
        <div class="portlet-header">Shopping</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
</div>
<div class="column">
    <div class="portlet">
        <div class="portlet-header">Links</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
</div>

CSS

.column {
    float: left;
    padding-bottom: 100px;
}
.portlet {
    width: 170px;
    margin: 0 1em 1em 0;
}
.portlet-header {
    margin: 0.3em;
    padding-bottom: 4px;
    padding-left: 0.2em;
}
.portlet-header .ui-icon {
    float: right;
}
.portlet-content {
    padding: 0.4em;
}
.ui-sortable-placeholder {
    border: 1px dotted black;
    visibility: visible !important;
    height: 50px !important;
}
.ui-sortable-placeholder * {
    visibility: hidden;
}

JavaScript

$(function () {
    $(".column").sortable({
        connectWith: ".column",
        placeholder: 'ui-state-highlight',
        forcePlaceholderSize: true
    });
    $(".portlet").resizable().addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
        .find(".portlet-header")
        .addClass("ui-widget-header ui-corner-all")
        .prepend("<span class='ui-icon ui-icon-minusthick'></span>")
        .end()
        .find(".portlet-content");
    $(".portlet-header .ui-icon").click(function () {
        $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
        $(this).parents(".portlet:first").find(".portlet-content").toggle();
    });
    $(".column").disableSelection();
});