JSFiddle - React, Tailwind, and code Playground

HTML

<div class="elem1">
    <p>Hello <strong>World!</strong></p>
</div>
<div class="elem2"></div>
<div class="elem3"></div>

<div id="output"></div>

CSS

div{
    padding: 20px;
    font-size: 30px;
    background: #f0f0f0;
    position: relative;
    z-index: 1;
}
div strong{
    cursor: pointer;   
}

div.elem2{
    padding: 120px;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 0;
    background: #ccc;
}

div.elem3{
    padding: 20px;
    position: absolute;
    left: 200px;
    top: 100px;
    z-index: 0;
    background: #333;
    color: #fff;
    font-size: 12px;
}

#output {
 
width: auto;
 height: auto;
font-size: 11px;
position: absolute;
top: 300px;    
}

JavaScript

$(document).click(function(e) {

    var hitElements = getHitElements(e);

    var output = $('#output');

    output.html('');

    for (var i = 0; i < hitElements.length; ++i) {

        output.html(output.html() + '<br />' + hitElements[i][0].tagName + ' ' + hitElements[i][0].className);

    };

});

var getHitElements = function(e) {

    var x = e.pageX;
    var y = e.pageY;

    var hitElements = [];

		var all = document.all;
    $(':visible').each(function() {

        var offset = $(this).offset();

        if (offset.left < x && (offset.left + $(this).outerWidth() > x) && (offset.top < y && (offset.top + $(this).outerHeight() > y))) {

            hitElements.push($(this));

        }

    });

    return hitElements;

}