JSFiddle - React, Tailwind, and code Playground

HTML

<div id='board'>
        </div>

CSS

#board
{
  width: 468px;
  height: 416px;
  border: 1px solid white;
  background-color: brown;
}

#canvas
{
  width: 760px;
  height: 800px;
  border: 1px solid;
}


.cell
{
  width: 50px;
  height: 50px;
  border: 1px solid white;
  float: left;
}


.active
{
  background-color: green;
}





.sample {
    background-color: yellow;
    background-size: 50px 50px;
    width: 50px;
    height: 50px;

}

.EMPTY {
    background: none;
}

JavaScript

var sample = 200;
  

  var board = [[sample,0,0,0,0,0,0,0,0],
              [0,0,0,0,0,0,0,0,0],
              [0,0,0,0,0,0,0,0,0],
              [0,0,0,0,0,0,0,0,0],
              [0,0,0,0,0,0,0,0,0],
              [0,0,0,0,0,0,0,0,0],
              [0,0,0,0,0,0,0,0,0],
              [0,0,0,0,0,0,0,0,0]];



  function getPieceName(pieceVal) {
      switch (pieceVal) {
          case sample:       return 'sample';       break;
   

          default: return 'EMPTY'; break;
      }
  }



  $(function () {
      drawBoard();
  });



  function drawBoard() {
    var str = '';
    for( var x = 0 ; x < 8 ; x++ ){

        for( var y = 0 ; y < 9 ; y++ ){
            str += '<div class="cell" data-square="'+ x +","+ y +'">' +
            '<div class="draggable ' + getPieceName(board[x][y]) + '" data-value="' + board[x][y] + '"></div>' +
            '</div>';
        }

    }
    $('#board').append(str);
  }



  $(document).ready(function() {

     $('.draggable').each(function(index, div) {
       
      $(div).draggable({ snap: '#board', revertDuration: 500, cursor: 'move', opacity: 0.50, helper: 'clone', containment: '#board',
        revert: function ( event, ui ) {
                $(this).data("value").originalPosition = {
                top: 0,
                left: 0
                };
        return !event;
        },
        start: function() {
                 var from = $(this).parent().attr('data-square');

                 var splitSquare = from.split(',');
                 splitSquare[0] = splitSquare[0];
                 splitSquare[1] = splitSquare[1]-2+2;
                 var joinSquare = splitSquare.join();
                 $("div[data-square='"+joinSquare+"']").addClass('active');

                 splitSquare[0] = splitSquare[0];
                 splitSquare[1] = splitSquare[1]-2+3;
                 var joinSquare = splitSquare.join();
                 $("div[data-square='"+joinSquare+"']").addClass('active');

                 splitSquare[0] =...