JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="input"></textarea>
<div id="output"><span></span></div>

<div id="xy"></div>

CSS

#input, #output {
    position:absolute;
    top:0;
    left:0;
    font:14px/1 monospace;
    padding:5px;
    border:1px solid #999;
    white-space:pre;
    margin:0;
    background:transparent;
    width:300px;
    max-width:300px;
}

#input { 
    z-index:2;
    min-height:200px;
}

#output { 
    border-color:transparent; 
}
#output span {
    opacity:0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

#xy { 
    position:absolute; 
    width:4px;
    height:4px;
    background:#f00;
}

JavaScript

var input = document.getElementById('input'),
    output = document.getElementById('output').firstChild,
    position = document.getElementById('position'),
    update = function(){
         output.innerHTML = input.value.substr( 0, input.selectionStart ).replace(/\n$/,"\n\001");
        var rects = output.getClientRects(),
            lastRect = rects[ rects.length - 1 ],
            top = lastRect.top - input.scrollTop,
            left = lastRect.left+lastRect.width;
        xy.style.cssText = "top: "+top+"px;left: "+left+"px";
    }

input.addEventListener('keyup', update);
input.addEventListener('mouseup', update);
input.addEventListener('scroll', update);