JSFiddle - React, Tailwind, and code Playground

by cutsomeat

HTML

<div id="board" class="board"></div>

CSS

body { font-size: 0; }
.board {
    border: 1px solid Black;
    background-color: lightgray;
    padding: 0px;
    margin: 0px;
    width: 382px;
    height: 382px;
}
.piece {
    border: 1px solid Black;
    background-color: #fcc;
    margin: ;
    width: 120px;
    height: 120px;
    display: inline-block;
}
.piece:nth-child(1) { margin: 4px 0px 0px 4px; }
.piece:nth-child(2) { margin: 4px 4px 0px 4px; }
.piece:nth-child(3) { margin: 4px 4px 0px 0px; }
.piece:nth-child(4) { margin: 4px 0px 0px 4px; }
.piece:nth-child(5) { margin: 4px 4px 0px 4px; }
.piece:nth-child(6) { margin: 4px 4px 0px 0px; }
.piece:nth-child(7) { margin: 4px 0px 4px 4px; }
.piece:nth-child(8) { margin: 4px 4px 4px 4px; }
.piece:nth-child(9) { margin: 4px 4px 4px 0px; }

JavaScript

(function ($) {
    var pieces = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    var board = $("#board");
    $.each(pieces, function (index, value) {
        var piece = $("<div>");
        piece.attr("id", value);
        piece.addClass("piece");
        board.append(piece);
    });
    
    $(".piece").draggable({
        containment: "parent",
        stack: ".piece",
        handles: "n,s,e,w"
    });



}(jQuery));