JSFiddle - React, Tailwind, and code Playground

HTML

<!-- onclick fires only on upper half of div2 -->
<div class="div1" onclick="console.log('click')">
  <div class="div2">
  text
  </div>
</div>

CSS

.div1 {
  height: 50px;
  padding-top: 10px;
  box-sizing: border-box;
  background: black;
}
.div1:hover {
  padding-top: 10px;
}
.div1:active {
  padding-top: 0;
}

.div2 {
  background: white;
}