JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
  <div id = "inner"></div>
</div>

CSS

#outer { 
  width: 200px;
  height: 300px;
  border: 5px solid navy;
  display: block;
}

#inner {
  width: 150px;
  height: 250px;
  border: 5px solid brown;
  display: block;
  margin: 20px;
}

JavaScript

document.getElementById('inner').addEventListener('click', function (event){
	event.stopPropagation();
	console.log ('Inner div clicked!');
});

document.getElementById('outer').addEventListener('click', function (event){
	console.log ('Outer div clicked!');
});