JSFiddle - React, Tailwind, and code Playground

HTML

<p>Select something in here using the mouseSelect something in here using the mouseSelect something in here using the mouseSelect something in here using the mouseSelect something in here using the mouseSelect something in here using the mouseSelect something in here using the mouseSelect something in here using the mouseSelect something in here using the mouseSelect something in here using the mouseSelect something in here using the mouseSelect something in here using the mouseSelect something in here using the mouseSelect something in here using the mouse</p>
<p>Selection top left coordinates: <span id="coords"></span></p>
<div id='hello'></div>

CSS

div {
    width: 3px;
    height: 3px;
    background-color: red;
    position:absolute;
    top:0;
    left:0;
}

JavaScript

function getSelectionCoords() {
    var sel = document.selection, range;
    var x = 0, y = 0;
    if (sel) {
        if (sel.type != "Control") {
            range = sel.createRange();
            range.collapse(true);
            x = range.boundingLeft;
            y = range.boundingTop;
        }
    } else if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0).cloneRange();
            if (range.getClientRects) {
                range.collapse(true);
                var rect = range.getClientRects()[0];
                x = rect.left;
                y = rect.top;
            }
        }
    }
    return { x: x, y: y };
}

document.onmouseup = function() {
    var coords = getSelectionCoords();
    document.getElementById("coords").innerHTML = coords.x + ", " + coords.y;
    
    var red = document.getElementById('hello');

    red.style.top = coords.y+'px';
    red.style.left = coords.x+'px';
};