JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cell" id="1" onClick="overlayDIV(this.id);" contenteditable="true"></div>

CSS

.cell {
     float: left;
     width: 11px;
     height: 11px;
     white-space: nowrap;
     overflow: visible;
     border: 2px;
     position: static;
     border-style:solid;
     border-color:black;
 }

JavaScript

overlayDIV = function (clickedId) {

    // see if div already exists if not create it
    if (!document.getElementById("overlay" + clickedId)) {
        var div = document.createElement("div");
        div.id = "overlay" + clickedId;
        div.style.width = "12px";
        div.style.height = "12px";
        div.style.background = "red";

        div.style.position = "absolute";
        div.style.zIndex = "1";

        //added this line after reading the other post, 
        div.setAttribute('tabindex', '0');

        document.getElementById(clickedId).appendChild(div);
    }

    document.getElementById("overlay" + clickedId).focus();
}