JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/pa7/heatmap.js/master/build/heatmap.min.js"></script>
Lorem ipsum

<div class="z2">
  <a href="http://example.com">Some Text</a>
</div>
<div class="z1">
  Text
</div>

CSS

html{
  height: 100%;
}

.heatmap-canvas{
	z-index: 9999;
    /*opacity: 0;*/
    pointer-events: none;
}

.z1{
  position: absolute;
  top: 400px;
  left: 400px;
  width: 100px;
  height: 200px;
  background-color: blue;
  z-index: 1;
}

.z2{
  position: absolute;
  top: 500px;
  left: 410px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  z-index: 2;
}

JavaScript

// create instance
var heatmapInstance = h337.create({
  container: document.querySelector('html'),
  radius: 90
});
document.querySelector('html').onmousemove = function(ev) {
  heatmapInstance.addData({
    x: ev.clientX,
    y: ev.clientY,
    value: 1
  });
};