JSFiddle - React, Tailwind, and code Playground

by evgkch

HTML

<div id="parent">
  <div id="red">RED</div>
  <div id="blue">BLUE</div>
</div>

CSS

#parent {
  position: relative;
}

#red {
  width: 50px;
  height: 50px;
  padding: 5px;
  background: red;
  z-index: 10;
}

#blue {
  opacity: 0.9;
  background: blue;
  position: absolute;
  top: 0;
  width: 100%;
 }

JavaScript

const parent = document.getElementById('parent');
const red = document.getElementById('red');
const blue = document.getElementById('blue');

parent.onclick = (evt) => {
	console.log(evt);
	console.log('parent');
}

red.onclick = (evt) => {
	console.log('red');
}

blue.onclick = (evt) => {
	console.log('blue');
}