JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width: 500px;">

    <div id="widget3" class="widget">
        <div class="widget-top">
            <div class="widget-header">
                <div class="widget-nw"></div>
                <div class="widget-n">
                    <div class="widget-header-title">Demo Widget 3</div>
                    <div class="widget-header-link"><a href="#">Edit</a></div>
                    <div class="widget-header-controls">

                        <span class="widget-header-control"><img src="http://dl.dropbox.com/u/638285/SO/images/icon-refresh.png" class="widget-refresh" alt="refresh" /></span>
                        <span class="widget-header-control"><img src="http://dl.dropbox.com/u/638285/SO/images/icon-minimize.png" class="widget-minimize" alt="minimize" /></span>
                        <span class="widget-header-control"><img src="http://dl.dropbox.com/u/638285/SO/images/icon-close.png" class="widget-close" alt="close" /></span>
                    </div>
                </div>
                <div class="widget-ne"></div>
            </div>
        </div>
        <div class="widget-bottom">

            <div class="widget-body">
                <div class="widget-w"></div>
                <div class="widget-e"></div>
                <div class="widget-content">
                     Demo Widget 3<br />
                     Demo Widget 3<br />
                     Demo Widget 3<br />

                     Demo Widget 3<br />
                     Demo Widget 3
                </div>
            </div>
            <div class="widget-footer">
                <div class="widget-sw"></div>
                <div class="widget-s">
                    <div class="widget-footer-controls">
                        <span class="widget-footer-control">

                        </span>
                    </div>
                </div>
                <div class="widget-se"></div>
            </div>
        </div>
    </div>

    <div id="widget4"...

CSS

body
{
    margin: 0;
    font-family: Verdana, Helvetica, sans-serif;
    font-size: small;
}
.container
{
}
.column
{
    background-color: #fff;
    float: left;
    margin: 2px;
}
.droptarget
{
    height: 4px;
}
.targethover
{
    background-color: Gray;
    height: 20px;
}
.widgethover
{
    background-color: Gray;
}


.widget-nw
{
    background-image: url('http://dl.dropbox.com/u/638285/SO/images/widget-top-left.png');
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    height: 28px;
    width: 6px;
    z-index: 2;
}

.widget-ne
{
    background-image: url('http://dl.dropbox.com/u/638285/SO/images/widget-top-right.png');
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    height: 28px;
    width: 6px;
    z-index: 2;
}
.widget-sw
{
    background-image: url('http://dl.dropbox.com/u/638285/SO/images/widget-bottom-left.png');
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 28px;
    width: 6px;
    z-index: 2;
}

.widget-se
{
    background-image: url('http://dl.dropbox.com/u/638285/SO/images/widget-bottom-right.png');
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    right: 0;
    height: 28px;
    width: 6px;
    z-index: 2;
}

.widget-w
{
    background-image: url('http://dl.dropbox.com/u/638285/SO/images/widget-middle-left.png');
    background-repeat: repeat-y;
    position: absolute;
    left: 0;
    height: 100%;
    width: 6px;
    z-index: 1;
}

.widget-e
{
    background-image: url('http://dl.dropbox.com/u/638285/SO/images/widget-middle-right.png');
    background-repeat: repeat-y;
    position: absolute;
    right: 0;
    height: 100%;
    width: 6px;
    z-index: 1;
}
.widget-n
{
    background-image: url('http://dl.dropbox.com/u/638285/SO/images/widget-top-middle.png');
    background-repeat: repeat-x;
    position: absolute;
    top: 0;
    height: 28px;
    width: 100%;
    z-index:...

JavaScript

$(document).ready(function () {
            $('.widget-minimize').click(function () {
                toggleMinimize($(this).parents('.widget').attr('id'));
            });

            $('.widget-close').click(function () {
                closeWidget($(this).parents('.widget').attr('id'));
            });
        });

        function toggleMinimize(widgetId) {
            var $content = $('#' + widgetId + ' .widget-content');
            if ($content.height()) {
                $content.data('oldheight', $content.height());
                $content.animate({height: 0});
                $('#' + widgetId).find('.widget-minimize').attr('src', 'http://dl.dropbox.com/u/638285/SO/images/icon-maximize.png').attr('alt', 'maximize');
            }
            else {
                $content.animate({height: $content.data('oldheight')});
                $('#' + widgetId).find('.widget-minimize').attr('src', 'http://dl.dropbox.com/u/638285/SO/images/icon-minimize.png').attr('alt', 'minimize');
            }
        }

        function closeWidget(widgetId) {
             $('#' + widgetId).animate({ "opacity": 0, "height": 0 }, 200, "swing");
        }