JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
<html>
    <body>
    <div class="main">
        <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
                <img alt="Strawberry" src="http://s17.postimage.org/t34byp8ij/images_4.jpg?noCache=1355467648">
                </div>
            
        </div>
        <div class="portlet">
            <div class="portlet-header">Fruits</div>
            <div class="portlet-content">mango strawberry and chiku
            
            <img alt="Strawberry" src="http://s17.postimage.org/t34byp8ij/images_4.jpg?noCache=1355467648">
            </div>
            
        </div>
    </div>
</body>
</html>

CSS

.portlet {
    position: absolute;
    overflow:auto !important;
}

.restore {
    margin: 0 1em 1em 0;
}

.portlet-header {
    margin: 0.3em;
    padding-bottom: 4px;
    padding-left: 0.2em;
    cursor: move;
}

.portlet-header .ui-icon {
    float: right;
}

.portlet-content {
    padding: 0.4em;
}

.column {
    width: 350px;
    float: left;
    padding-bottom: 100px;
}

.ui-sortable-placeholder {
    border: 1px dotted black;
    visibility: visible !important;
    height: 50px !important;
}

.ui-sortable-placeholder * {
    visibility: hidden;
}

.ui-icon-minusthick,.ui-icon-closethick,.ui-icon-arrow-1-ne,.ui-icon-arrow-1-sw,.ui-icon-plusthick
    {
    cursor: auto;
}

.ui-icon-gripsmall-diagonal-se {
        background-image: none !important;
    }
    
.maximise 
{
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        left: 0px !important;
        top: 0px !important;
        z-index: 1 !important;
}

JavaScript

$(function() {
         var ht;
     
            $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-corner-all restore ui-draggable ui-resizable" )
            .find( ".portlet-header" )
                .addClass( "ui-widget-header ui-corner-all" )
                .prepend( "<span class='ui-icon ui-icon-minusthick collapse'></span>")                
                .prepend( "<span class='ui-icon ui-icon-closethick close'></span>")
                .prepend( "<span class='ui-icon ui-icon-arrow-1-ne maxRestore'></span>")
                .end()
        
                
            $(".collapse").click(function(){
                
                   $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
                    $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
                    
                    if($(this).hasClass("ui-icon-plusthick"))
                    {
                        //var Headht = $( this ).parents( ".portlet:first" ).find( ".portlet-header" ).clientHeight();
                        ht=$( this ).parents( ".portlet:first" ).height();    
                        //alert(ht);
                        $( this ).parents( ".portlet:first" ).css({'height':'auto' });
                    }
                    
                    if($(this).hasClass("ui-icon-minusthick"))
                    {
                        //alert(ht);
                        $( this ).parents( ".portlet:first" ).css({'height':ht+'!important'});
                    }
                    
                    //$( this ).parents( ".portlet:first" ).css({'height':'70px'});
            });
            
            $(".close").click(function(){
                $( this ).parents( ".portlet:first" ).remove();
            });
            
            $(".maxRestore").click(function(){
                 $( this ).toggleClass( "ui-icon-arrow-1-ne" ).toggleClass( "ui-icon-arrow-1-sw" );
                 
              ...