JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div class="column ui-sortable left">
    <h1>left Column</h1>
    
    <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">Feeds</div>
        <div class="portlet-content">amet, consectetuer adipiscing elit</div>
    </div>
    <div class="portlet">
        <div class="portlet-header">Shopping</div>
        <div class="portlet-content">Lorem et, 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 ui-sortable right">
    <h1>Right Column</h1>
    
    <div class="portlet">
        <div class="portlet-content">
            <button class="punch">JUMP<sub>NETWORK</sub></button>
        </div>
    </div>
</div>

CSS

.red { background: red; }
.fr {
    display: inline-block;
    float: right;  
}
sub { display: block; }

.column.right {
    direction: rtl;   
}
.column {
    display: inline-block;
    padding: 0;
    margin: 0;
    background: rgba(242, 242, 242, 1);
    font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
    font-size: 12px;
}

.portlet:first-child {
    border-left: 1px solid #AAA;
}
.portlet {
    display: inline-block;
    height: 90px;
    width: 120px;
    overflow: hidden;
    padding: 3px;
    margin: 0;
    border: 1px solid #AAA;
    border-left: 0;
    vertical-align: top;
    background: rgba(242, 242, 242, 1);
    text-align: left;
}
.portlet-header {
    margin: 0;
    padding: 4px 0 0;
    padding-left: 0.4em;
    background: white;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    text-align: left;
}
.portlet-content {
    padding: 0.4em;
}



/* JUMP BUTTON */
/* punch
*******************************************************************************/
button.punch {
    background: #4162a8;
    border-top: 1px solid #38538c;
    border-right: 1px solid #1f2d4d;
    border-bottom: 1px solid #151e33;
    border-left: 1px solid #1f2d4d;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
    -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
    -ms-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
    -o-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
    box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
    color: #fff;
    font: bold 20px "helvetica neue", helvetica, arial, sans-serif;
    line-height:...

JavaScript

$(".column").sortable({
    connectWith: ".column",
    handle: '.portlet-header',
    items: '.portlet',
    opacity: 0.6,
    tolerance: 'pointer'
});

$(".portlet").find(".portlet-header").prepend("<span class='ui-icon ui-icon-minusthick fr'>+</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();