JSFiddle - React, Tailwind, and code Playground

by alvaroveliz

HTML

<!DOCTYPE html>
<html lang="en">
<body>
  <div id="sortable">
    <div id="span-3" class="portlet">
      <div class="portlet-header">Links</div>
      <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
    <div id="span-1" class="portlet">
        <div class="portlet-header">Links</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
    <div id="span-2" class="portlet">
        <div class="portlet-header">Links</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
    <div id="span-2" class="portlet">
        <div class="portlet-header">Links</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
    <div id="span-1" class="portlet">
        <div class="portlet-header">Links</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
  </div>
</body>
</html>

CSS

body {
  padding: 20px;
}

#sortable {
  width: 320px;
  border: 1px solid #ccc;
  padding: 3px;
    overflow: hidden;
}

div.portlet {
  margin: 3px;
  padding: 1px;
  float: left;
  overflow: hidden;
}

#span-1 { width: 100px; }
#span-2 { width: 200px; }
#span-3 { width: 310px; }

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



/* Below is a minified http://jqueryui.com/themes/base/jquery.ui.all.css
   You can ignore it. The site simply doesn't allow hotlinking that's why I pasted it.
*/

body{font-size:62.5%;font-family:"Trebuchet MS", Helvetica, Arial, Verdana, sans-serif;}.layout-grid{width:960px;}.layout-grid td{vertical-align:top;}.layout-grid td.left-nav{width:140px;}.layout-grid td.normal{border-left:1px solid #eee;font-family:"Trebuchet MS", Helvetica, Arial, Verdana, sans-serif;padding:20px 24px;}.layout-grid td.demos{background:url(/images/demos_bg.jpg) no-repeat;height:337px;overflow:hidden;}.normal h3,.normal h4{font-weight:400;margin:0;}.normal h3{font-size:1.8em;padding:0 0 9px;}.normal h4{padding-bottom:21px;border-bottom:1px dashed #999;font-size:1.2em;font-weight:700;}.normal p{font-size:1.2em;}.demos-nav{float:left;width:170px;font-size:1.3em;}.demos-nav dt,.demos-nav h4{font:normal 1.1em "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif;color:#e87b10;line-height:1.2em;border-bottom:1px solid #F4F4F4;margin:1.5em 0 0;padding:0 0 5px 8px;}.demos-nav dd a,.demos-nav li a{border-bottom:1px solid #F4F4F4;display:block;font-size:90%;text-decoration:none;color:#555;height:13px;margin:2px 0;padding:4px 3px 4px 8px;}.demos-nav dd...

JavaScript

$(function() {
  $( "#sortable" ).sortable();
  $( "#sortable" ).disableSelection();
  
  $( ".portlet" )
    .addClass( "ui-widget ui-widget-content 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" ).toggleClass( "portlet-minimized" );
  });

  $( ".column" ).disableSelection();
});