JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="width: 400px; height: 400px;position:relative">
</div>
<div id="myDiv1" style="width: 400px; height: 400px;position:relative">
</div>

CSS

.tooltip-d3 {
  position: absolute;
  text-align: center;
  min-width: 175px;
  min-height: 150;
  padding: 2px;
  font-size: 15px;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 8px;
  pointer-events: none;
  z-index: 9999;
}

JavaScript

var x = [10, 30, 150, 600, 1200, 1800];
var y = [-25, -7, 10, 25, 35];
var z = [
  [250, 165, 91, 69, 0, 0],
  [250, 250, 159, 79, 41, 27],
  [250, 250, 192, 82, 42, 28],
  [250, 250, 192, 84, 42, 28],
  [250, 250, 195, 84, 42, 28]
];
var z1 = [
  [240, 155, 91, 59, 0, 0],
  [240, 240, 149, 59, 31, 17],
  [240, 240, 182, 72, 32, 17],
  [240, 240, 182, 74, 32, 17],
  [240, 240, 185, 74, 32, 17]
];
var data = [{
  x: x,
  y: y,
  z: z,
  type: 'contour',
  autocontour: true,
  connectgaps: true,
  contours: {
    coloring: 'heatmap',
    showlabels: true,
    labelfont: {
      family: 'Raleway',
      size: 12,
      color: 'white',
    }
  },
  colorbar: {
    title: "zAxisData",
    titleside: 'right',
    titlefont: {
      size: 14,
      family: 'Arial, sans-serif'
    }
  }
}];
var data1 = [{
  x: x,
  y: y,
  z: z1,
  type: 'contour',
  autocontour: true,
  connectgaps: true,
  contours: {
    coloring: 'heatmap',
    showlabels: true,
    labelfont: {
      family: 'Raleway',
      size: 12,
      color: 'white',
    }
  },
  colorbar: {
    title: "zAxisData",
    titleside: 'right',
    titlefont: {
      size: 14,
      family: 'Arial, sans-serif'
    }
  }
}];
var layout = {
  xaxis: {
    title: "xAxisData", //set x axis label
    type: 'category',
    anchor: 'yaxis',
    titlefont: {
      family: 'Courier New, monospace',
      size: 18,
      color: '#7f7f7f'
    }
  },
  yaxis: {
    title: "yAxisData", //set y axis label
    type: 'category',
    anchor: 'xaxis',
    titlefont: {
      family: 'Courier New, monospace',
      size: 18,
      color: '#7f7f7f'
    }
  },
  hovermode: 'closest',
};

Plotly.newPlot('myDiv', data, layout);
//Plotly.newPlot('myDiv1', data1, layout);

var div = Plotly.d3.select('body').append("div").attr("class", "tooltip-d3")
  .style("opacity", 1);
var myPlot = document.getElementById('myDiv');
var myPlot1 = document.getElementById('myDiv1');
var tooltip1 = Plotly.d3.select('#myDiv...