JSFiddle - React, Tailwind, and code Playground

by cutsomeat

HTML

<div id="d1" class="dz"></div>
<div id="d2" class="dz"></div>
<div id="d3" class="dz"></div>

<div id="bits"></div>

CSS

.dz {
    background-color: #ccc;
    border: 1px solid Black;
    width: 120px;
    height: 120px;
    margin: 10px;
    display: inline-block;
}
.bit {
    border: 1px solid Black;
    background-color: #ddd;
    width: 20px;
    height: 20px;
    margin: 4px;
    display: inline-block;
}
#bits {
    background-color: #ccc;
    border: 1px solid Black;
    width: 412px;
    height: 120px;
    margin: 10px;
    display: inline-block;
}

JavaScript

(function ($) {
    
    var bits = $("#bits");
    
    for (i = 1; i < 10; i++) {
        var bit = $("<div>");
        bit.addClass("bit");
        bits.append(bit);
    };
    
    $(".dz").droppable();
}(jQuery));