JSFiddle - React, Tailwind, and code Playground

HTML

<iframe id="frame" src="http://www.guguncube.com">
</iframe>
<div id="overlay">
</div>

CSS

#frame{
  z-index: 1;
  width: 900px;
  height: 400px;
  position: absolute;
  pointer-events:all;
}

#overlay {
  width: 905px;
  height: 405px;
  opacity: 0;
  background: red;
  z-index: 9999;
  position: absolute;
  pointer-events: none;
}

JavaScript

jQuery(function ($) { // DOM ready
  
   $('#overlay').on('click', function(e) {
     alert('test');
   });
  
});