JSFiddle - React, Tailwind, and code Playground

HTML

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

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

CSS

html{
  height: 100%;
}

.layer{
  position: absolute;
  background-color: green;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 1;
}

.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('.layer'),
  radius: 90
});
document.querySelector('.layer').onmousemove = function(ev) {
  heatmapInstance.addData({
    x: ev.layerX,
    y: ev.layerY,
    value: 1
  });
};