JSFiddle - React, Tailwind, and code Playground

HTML

<button onClick="alert('BUTTON clicked')">
  button
  <span onClick="alert('SPAN clicked')">span</span>
</button>


<!-- clicks on span element positioned outside of button not triggers click event on button nor on span -->
<!-- even cursor on span not gain pointer style, it looks like default arrow -->

CSS

button {cursor: pointer;}
span {display: block; width: 50px; height: 50px; position: relative; top: 30px; background: orange; cursor: pointer;}