JSFiddle - React, Tailwind, and code Playground

by Casey Rule

HTML

<div id="container">
    <h1>Magnetic Poetry</h1>
    <div>
        <form>
            <input type='text' id='word' />
            <input type='button' id='addBtn' value='Add Word' />
            <input type='button' id='deleteBtn' value='Delete' />
        </form>
    </div>
</div>

CSS

.btn {
    background-color: #FFFFFF;
    color: #000000;
    outline: none;
    position: relative;
    z-index: 0;
    border-color: #000000;
    border-bottom-width: 2px;
    border-right-width: 2px;
    border-top-width: 1px;
    border-left-width: 1px;
    font-size: 16px;
    font-family: serif;
}

h1 {
    color: #ffffff;
    font-family: sans-serif;
}

#container {
    text-align: center;
}

button:focus {
    background-color: yellow;
}

JavaScript

$(document).ready( function(){
    var btnClicked = null;
    var btnId = 0;
    var currentBtnId = btnId;
    var innerCoordX = null;
    var innerCoordY = null;
    var counter = 0;
    
    function addWord(text) {
        text = text || document.getElementById('word').value;
        console.log(text);
        var btn = document.createElement('button');
        btn.className = 'btn';
        btn.id = btnId++;
        btn.value = text;
        btn.innerHTML = btn.value;
        btn.onmousedown = doMouseDown;
        document.getElementById("container").appendChild(btn);
    }
    
    function doMouseDown(evt) {
        counter++;
        btnClicked = evt.target;
        innerCoordX = evt.clientX - btnClicked.offsetLeft;
        innerCoordY = evt.clientY - btnClicked.offsetTop;
        btnClicked.style.zIndex = counter;
        currentBtnId = btnClicked.id;
        //console.log("currnet buttn id: " + currentBtnId);
    }
    
    function doMouseMove(evt) {
        if (btnClicked !== null) {
            btnClicked.style.position = 'absolute';
            btnClicked.style.left = (evt.clientX - innerCoordX) + 'px';
            btnClicked.style.top = (evt.clientY - innerCoordY) + 'px';  
        }
    }
    
    function doMouseUp(evt) {
        if (btnClicked !== null) {
            btnClicked = null;
        }
    }  
    
    function del() {
        for (var i = 0; i < currentBtnId; i++) {
            if ($('#' + i).is(':focus')) {
                console.log("delete");
            }
        }
    }
    
    $('#addBtn').click(addWord);
    $('#deleteBtn').click(del);
    
    $('.btn').click(function() {
        //currentBtnId = btnClicked.id;
        console.log("current btn id: " + currentBtnId);
    });
    
    /*$("#background").click(function() {
                console.log("background clicked");
                if (this.class !== 'btn') {
                    $(".btn").css("borderColor", "black");
                    console.log("button black");
      ...