JSFiddle - React, Tailwind, and code Playground

by Ajey

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="column">
 
    <div class="portlet">
        <div class="portlet-header">Feeds</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
            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
            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 class="portlet">
    <div class="portlet-header">News</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...

CSS

body {
    min-width: 520px;
    max-height: 100vh;
    background: #FFF;
    overflow: hidden;
  }
  .column {
    width: 33%;
    float: left;
    padding-bottom: 100px;
  }
  .portlet {
    margin: 0 1em 1em 0;
    padding: 0.3em;
    height: 300px;
    overflow: scroll;

    border: none !important;
  }
  .portlet-header {
    padding: 10px;
    margin: 0 !important; 
    border-radius: 0;
    margin-bottom: 0.5em;
    position: relative;
    background: #EDF1F5;
  }
  .portlet-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -8px;
  }
  .portlet-content {
    padding: 0.4em;
    background: #EDF1F5;
    border-radius: 0;
  }
  .portlet-placeholder {
    border: 1px dotted blue;
    margin: 0 1em 1em 0;
    height: 50px;
  }

  .footer {
    position: absolute;
    bottom: 0;
    background: black;
    width: 100%;
    height: 32px;
    left: 0;
    color: white;
    text-align: center;
  }

JavaScript

$(document).ready(function() {
	$( function() {
    $( ".column" ).sortable({
      connectWith: ".column",
      handle: ".portlet-header",
      cancel: ".portlet-toggle",
      placeholder: "portlet-placeholder ui-corner-all"
    });
 
    $( ".portlet" )
      .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 portlet-toggle'></span>");
 
    $( ".portlet-toggle" ).on( "click", function() {
      var icon = $( this );
      icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );
      icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();
    });
  } );
});