JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box1" onclick="alert('box1 clicked');">
    <div class="box2"></div>
</div>

CSS

.box1
{
    height: 100px;
    width: 100px;
    background-color: yellow;
}
.box1:hover {
    background-color: pink;
}
.box2
{
    height: 50px;
    width: 50px;
    background-color: green;
    pointer-events: none;
}