JSFiddle - React, Tailwind, and code Playground

HTML

<div id="msg"></div>
<div class="p a">a</div>
<div class="p b">b</div>
<div class="p c">c</div>

CSS

body {
  margin: 10px;
}
.a, .b, .c {
  position: absolute;
  height: 100px;
  width: 100px;
  padding: 3px; 
  border: 1px #000 solid;
}
.a {
  top: 100px;
  left: 100px;
}
.b {
  top: 120px;
  left: 120px;
}
.c {
  top: 140px;
  left: 140px;
}

JavaScript

$divs = $("div.p").on('click.passThrough', function (e, ee) {
  var $el = $(this).hide();
  try {
    if (!ee) $("#msg").empty();
    $("<div/>").append($el.text()).appendTo($("#msg"));
    ee = ee || {
      pageX: e.pageX,
      pageY: e.pageY
    };
    var next = document.elementFromPoint(ee.pageX, ee.pageY);
    next = (next.nodeType == 3) ? next.parentNode : next //Opera
    $(next).trigger('click.passThrough', ee);
  } catch (err) {
    console.log("click.passThrough failed: " + err.message);
  } finally {
    $el.show();
  }
});

$divs.css({'backgroundColor':'#FF8', 'opacity': 0.5});//for prettiness