JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
    <div id="child"></div>
</div>

<!-- Задача:
- При клике на зелёную область должно срабатывать.
- При клике на часть красной области, которая находится "в пределах" родителя, должно срабатывать.
- При клике на часть красной области, которая находится "ВНЕ пределов" родителя, НЕ должно срабатывать.
-->

CSS

#parent {
     position: relative; 
     width: 100px; 
     height: 100px;
     padding: 20px;
     background: green; 
}
#child {
     pointer-events: all; 
     position: relative; 
     width: 150px; 
     height: 60px; 
     padding: 20px; 
     background: red; 
}

JavaScript

document.getElementById('parent').onclick = function() {
  alert("parent =)")
}
document.getElementById('child').onclick = function() {
  alert("child =)")
}