JSFiddle - React, Tailwind, and code Playground

by adil_invideo

HTML

<div class='bg'>

</div>

<div class='frame'>
  <div class='child1'>
    <div class='edit-wrapper'>
    <p>
    Hello
    </p>
    </div>
  </div>
</div>

CSS

body {
  position: relative;
}

.frame {
  position: absolute;
  width: 400px;
  height: 400px;
  background: pink;
  pointer-events: none;
}

.child1 {
  position: absolute;
  height: 200px;
  width: 200px;
  background: red;
  pointer-events: all;
}

.bg {
  position: absolute;
  width: 400px;
  height: 400px;
  background: pink;
}

p {
  font-size: 30px;
}

JavaScript

document.querySelector('.bg').onclick = () => {
  console.log('BG CLICKED');
};

document.querySelector('.frame').onclick = () => {
  console.log('FRAME CLICKED');
};

document.querySelector('.child1').onclick = () => {
  console.log('CHILDs CLICKED');
};

document.querySelector('p').onclick = (event) => {
  event.stopPropagation();

  console.log('PARA CLICKED');
};

document.querySelector('.edit-wrapper').onclick = () => {
  console.log('EDIT_WRAPPER CLICKED');
};