JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <title></title> 
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
        <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" rel="stylesheet" />

    </head> 
    <body>
        <div id="outerDiv">
            <div class="column column_0"></div>
            <div class="column column_1"></div>
            <div class="column column_2"></div>
        </div>
    </body> 
</html>

CSS

.column { width: 200px; float: left; }
.widget {  }
.widget_header { background:red; padding: 10px; height:40px; }
.widget_sub_header { background:#bbbbbb; padding: 10px; }
.widget_content { background:#cccccc; padding: 10px; }
.widget_footer { background:#dddddd; padding: 10px; }
.ui-sortable-placeholder { background:#eeeeee; visibility: visible !important; }
.ui-sortable-placeholder * { visibility: hidden; }

.divButtons { background:orange; display:none; }
.widget:hover  .divButtons { display:block; }

JavaScript

$(document).ready(function() {

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

    var j = 0;
    var i = 0;
    
    for ( j = 0; j <= 2; j++ ) {
        
        for ( i = 0; i <= 2; i++ ) {

            var $widget = $("<div class='widget widget_" + i + "'></div>").appendTo( $(".column_" + j ) );
            $("<div class='widget_header widget_header_" + i + "'></div>").appendTo( $widget );
            $("<div class='widget_sub_header widget_sub_header_" + i + "'></div>").appendTo( $widget );
            $("<div class='widget_content widget_content_" + i + "'></div>").appendTo( $widget );
            $("<div class='widget_footer widget_footer_" + i + "'></div>").appendTo( $widget );
        
        }
    }
    
    $("<div class='divButtons'></div>").appendTo( $(".widget_header") );
    $(".divButtons").text("321");

});