JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css">
<input type="button" value="button1" id="button1" />
<input type="button" value="button2" id="button2" />
<input type="button" value="button3" id="button3" />

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">tab 1</a></li>
        <li><a href="#tabs-2">tab 2</a></li>
        <li><a href="#tabs-3">tab 3</a></li>
    </ul>
    <div id="tabs-1">
<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 class="portlet">
        <div class="portlet-header">Images</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>

</div>
    </div>
    <div id="tabs-2">
        tab 2 content goes here
    </div>
    <div id="tabs-3">
        tab 3 content goes here
    </div>
</div>

CSS

#tabs { border:none; padding:0px; margin:0px; }
#tabs .ui-widget {  }
#tabs .ui-widget-header {  }
#tabs .ui-widget-content {  padding:0px;  }

.column { width: 200px; float: left;  }
.portlet { margin: 10px;  }
.portlet-header { margin: 0px; padding-bottom: 0px; padding-left: 0px; }
.portlet-header .ui-icon { float: right; }
.portlet-content { padding: 0px; }
.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
.ui-sortable-placeholder * { visibility: hidden; }

JavaScript

$("#tabs").tabs();
$(".ui-tabs-nav").hide();

 $("#button1").click(function() {$("#tabs").tabs( "select" , 0 );});
 $("#button2").click(function() {$("#tabs").tabs( "select" , 1 );});
 $("#button3").click(function() {$("#tabs").tabs( "select" , 2 );});

$(".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" );

$( ".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();