JSFiddle - React, Tailwind, and code Playground

CSS

ul#jQiBoard { 
    width: 570px; 
    height: 570px; 
    float: left; 
    margin: 0; 
    padding: 0; 
    border: 2px solid black; 
}
li.jQiNode { 
    display: block; 
    width: 30px; 
    height: 30px; 
    float: left; 
    list-style-type: none; 
    border: 0px solid silver; 
    background-color: #ae996f; 
    background-image: url(jQiNode.gif); 
}

#jQiStones { 
    padding: 10px; 
    border: 1px solid silver; 
    float: left; 
    margin: 0; 
    padding: 0; 
}

.jQiWhite { 
    width: 28px; 
    height: 28px; 
    border: 1px solid #666;
    background-color: #fefefe; 
    -moz-border-radius: 15px;
}

.jQiBlack { 
    width: 30px; 
    height: 30px; 
    background-color: #333;
    -moz-border-radius: 15px;
}

JavaScript

$(document).ready(function() {
    var i = 0;
    var a = 250;
    var b = 19;

    //append board
    var board = $('<ul></ul>').appendTo('body').attr('id', 'jQiBoard');
    
    while (i < b * b) {
        $('<li></li>').appendTo(board).addClass('jQiNode');
        i++;
    }
    
    var qiNodes = $('li.jQiNode');

    //init mouseover
    qiNodes.hover(function() {
        $(this).fadeTo(100, .55);
    }, function() {
        $(this).fadeTo(100, 1);
    });

    //append stones
    var stoneHolder = $('<p></p>').appendTo('body').attr('id', 'jQiStones');
    
    var whiteStone = $('<p></p>').appendTo(stoneHolder).addClass('jQiWhite');
    var blackStone = $('<p></p>').appendTo(stoneHolder).addClass('jQiBlack');

    whiteStone.draggable({
        snap: 'li.jQiNode',
        helper: 'clone',
        zIndex: 100,
    });
    
    blackStone.draggable({
        snap: 'li.jQiNode',
        helper: 'clone',
        zIndex: 100,
    });
    
    qiNodes.droppable({
        drop: function(event, ui) {
            ui.draggable.clone(true).appendTo(this);
        }
    });
});