JSFiddle - React, Tailwind, and code Playground

HTML

<ul class='container'>
    <li class='item size_s'>Kachel 1
        <div class='sub'>E
            <ul class='sub_menu'>
                <li data-size='size_s'>klein</li>
                <li data-size='size_m'>medium</li>
                <li data-size='size_l'>groß</li>
                <li data-size='size_xl'>extra groß</li>
            </ul>
        </div>
    </li>
    <li class='item size_s'>Kachel 2
        <div class='sub'>E
            <ul class='sub_menu'>
                <li data-size='size_s'>klein</li>
                <li data-size='size_m'>medium</li>
                <li data-size='size_l'>groß</li>
                <li data-size='size_xl'>extra groß</li>
            </ul>
        </div>
    </li>
     <li class='item size_m'>Kachel 3
        <div class='sub'>E
            <ul class='sub_menu'>
                <li data-size='size_s'>klein</li>
                <li data-size='size_m'>medium</li>
                <li data-size='size_l'>groß</li>
                <li data-size='size_xl'>extra groß</li>
            </ul>
        </div>
    </li>
    <li class='item size_l'>Kachel 4
        <div class='sub'>E
            <ul class='sub_menu'>
                <li data-size='size_s'>klein</li>
                <li data-size='size_m'>medium</li>
                <li data-size='size_l'>groß</li>
                <li data-size='size_xl'>extra groß</li>
            </ul>
        </div>
    </li>
    <li class='item size_s'>Kachel 5
        <div class='sub'>E
            <ul class='sub_menu'>
                <li data-size='size_s'>klein</li>
                <li data-size='size_m'>medium</li>
                <li data-size='size_l'>groß</li>
                <li data-size='size_xl'>extra groß</li>
            </ul>
        </div>
    </li>
    <li class='item size_s'>Kachel 6
        <div class='sub'>E
            <ul class='sub_menu'>
                <li data-size='size_s'>klein</li>
                <li data-size='size_m'>medium</li>
                <li...

CSS

.container{
    position:relative;
    width:560px;
    height:420px;
    background-color:#DDD;
   
    list-style-type:none;
    margin:0px;
    padding:0px;
}
.item{
    position:relative;
    float:left;
    margin:3px;
    z-index:1;
}
.item:hover{ z-index:99999; }
.item div.sub{ 
    position:absolute;
    top:0px;
    right:0px;
    width:15px;
    height:15px;
    background-color:rgba(0,0,0,0.9);
    display:none;
    cursor:pointer;
    color:#FFF;
}
.item div.sub ul.sub_menu{ 
    position:absolute;
    top:0px;
    right:-140px;
    width:140px;
    height:100px;
    background-color:rgba(0,0,0,0.9);
    display:none;
    color:#FFF;
    list-style-type:none;
    margin:0px;
    padding:0px;
}
.item:hover div.sub{ display:block; }
.size_s{ width:64px; height:64px; background-color:#f00; }
.size_m{ width:134px; height:134px; background-color:#0f0;}
.size_l{ width:274px; height:134px; background-color:#00f;}
.size_xl{ width:274px; height:274px; background-color:#0ff;}

JavaScript

(function($) {

    // for zeptojs;
    $.isNumeric == null && ($.isNumeric = function(src) {
        return src != null && src.constructor === Number;
    });

    $.isFunction == null && ($.isFunction = function(src) {
        return src != null && src instanceof Function;
    });

    var $W = $(window);
    var $D = $(document);
    
    var layoutManager = {
        // default setting;
        defaultConfig: {
            animate: false,
            cellW: 70, // function(container) {return 100;}
            cellH: 70, // function(container) {return 100;}
            delay: 0, // slowdown active block;
            engine: 'giot', // 'giot' is a person name;
            fixSize: 1,
            gutterX: 0, // width spacing between blocks;
            gutterY: 0, // height spacing between blocks;
            keepOrder: false,
            selector: '> li',
            draggable: false,
            cacheSize: true, // caches the original size of block;
            rightToLeft: false,
            bottomToTop: false,
            onGapFound: function() {},
            onComplete: function() {},
            onResize: function() {},
            onBlockDrag: function() {},
            onBlockMove: function() {},
            onBlockDrop: function() {},
            onBlockReady: function() {},
            onBlockFinish: function() {},
            onBlockActive: function() {},
            onBlockResize: function() {}
        },
        plugin: {},
        totalGrid: 1,
        transition: false,
        loadBlock: function(item, setting) {
            var runtime = setting.runtime;
            var gutterX = runtime.gutterX;
            var gutterY = runtime.gutterY;
            var cellH = runtime.cellH;
            var cellW = runtime.cellW;
            var block = null;
            var $item = $(item);
            var active = $item.data("active");
            var fixPos = $item.attr('data-position');
            var fixSize = parseInt($item.attr('data-fixSize'));
     ...