JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css">
<div id="tabs">
    <ul>
        <li class="tab" id="tab_1"><a href="#tabs-0">Home</a></li>
    </ul>
    <div id="tabs-0">
        <div class="column" id="column_1">

            <div class="portlet" id="portlet_1">
                <div class="portlet-header">Home 1</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>
            
            <div class="portlet" id="portlet_2">
                <div class="portlet-header">Home 2</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>

        </div>

        <div class="column" id="column_2">

            <div class="portlet" id="portlet_3">
                <div class="portlet-header">Home 3</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>

        </div>

        <div class="column" id="column_3">

            <div class="portlet" id="portlet_4">
                <div class="portlet-header">Home 4</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>
            
            <div class="portlet" id="portlet_5">
                <div class="portlet-header">Home 5</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>

        </div>
    </div>
</div>

CSS

.column { width: 170px; float: left; padding-bottom: 100px; }
.portlet { 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

$("#tabs").tabs();

$(".column").sortable({
    connectWith: '.column'
});

$( ".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'></span>")
        .end()
    .find( ".portlet-content" );
    
$(".column").disableSelection();