JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/ducksboard/gridster.js/master/dist/jquery.gridster.min.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/ducksboard/gridster.js/master/dist/jquery.gridster.min.css">
<div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="6" data-sizey="1">
            <div class="content">## Test content<br/>Test content<br/>Test</div>
            <div class="actions">
                <span class="edit">Edit</span>
                <span class="delete">Delete</span>
            </div>
        </li>
        <li data-row="1" data-col="2" data-sizex="6" data-sizey="1">
            <div class="actions">
                <span class="edit">Edit</span>
                <span class="delete">Delete</span>
            </div>
        </li>

        <li data-row="2" data-col="1" data-sizex="4" data-sizey="1">
            <div class="actions">
                <span class="edit">Edit</span>
                <span class="delete">Delete</span>
            </div>
        </li>
        <li data-row="2" data-col="2" data-sizex="4" data-sizey="1">
            <div class="actions">
                <span class="edit">Edit</span>
                <span class="delete">Delete</span>
            </div>
        </li>
        <li data-row="2" data-col="3" data-sizex="4" data-sizey="1">
            <div class="actions">
                <span class="edit">Edit</span>
                <span class="delete">Delete</span>
            </div>
        </li>
    </ul>
</div>

<button class="add">Add box</button>

CSS

.gridster {
    padding: 50px;
    background: #ddd;
}
li.gs-w {
    background: #fff;
}
.content {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 25px;
    left: 5px;
    overflow: hidden;
}
.actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f5f5f5;
    border-top: 1px solid #f0f0f0;
    height: 20px;
}
.actions span {
    display: block;
    width: 20px;
    height: 20px;
    float: left;
    cursor: pointer;
    text-indent: -9999px;
}
.actions span:hover { background: #fc0; }
.delete { background: #f03; }
.edit { background: #27f }

li:hover span { display: block; }
li span:hover { opacity: 0.7; }

JavaScript

jQuery(document).ready(function($) {
    $(".gridster ul").gridster({
        max_size_y: 1,
        resize: {
            enabled: true,
            max_size: [100, 1]
        },
        min_cols: 12,
        max_cols: 12,
        widget_margins: [5,5],
        widget_base_dimensions: [60, 120]
    });
    
    $('body').on('click', '.add', function(e) {
        var gridster = $(".gridster ul").gridster().data('gridster');
        var new_row = $('.gridster ul li:last').data('row') + 1;
        gridster.add_widget( '<li><div class="actions"><span class="edit">Edit</span><span class="delete">Delete</span></div></li>', 12, 1, 1, new_row );
        e.preventDefault();
    });
    
    $('.gridster').on('dblclick', 'li', function() {
        alert('edit');
    });
    
    $('body').on('click', '.delete', function(e) {
        var gridster = $(".gridster ul").gridster().data('gridster');
        var $widget = $(this).parents('li').hide();
        gridster.remove_widget( $widget );
        e.preventDefault();
    });
});