JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper" contenteditable="true">
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<div>
    <p style="color: red;">
        <span>Click me</span>
    </p>
</div>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>

JavaScript

var mouseCoordinates = {};
$(".wrapper").on("click", function(e){
    mouseCoordinates.x = e.clientX;
    mouseCoordinates.y = e.clientY;
}).on("keydown", function(){
    
    var $el = $(document.elementFromPoint(mouseCoordinates.x, mouseCoordinates.y));
    
    alert($el.prop("tagName") + ' -> ' + $el.parent().prop("tagName") + ' -> ' + $el.parent().parent().prop("tagName"));
    
});