JSFiddle - React, Tailwind, and code Playground

HTML

<div class="first" onclick="funOne()">
	<div class="second" onclick="funTwo(event)"></div>

</div>

CSS

.first{width:600px; height:600px; background:yellow}
.second{width:100px; height:100px; background:orange; position:relative; top:50%; left:50%; margin-left:-50px; margin-top:-50px}

JavaScript

function funOne()
{
//event.stopPropagation();
alert('Outer Div')
}

function funTwo(event)
{
event.stopPropagation();
alert('Inner Div')
}