JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.plot.ly/plotly-latest.js"></script>
<div>

</div>

JavaScript

Plotly.plot(document.querySelector("div"), {
  data: [{
    "x": [],
    "y": [],
    "z": [
      [303928, 308249, 328705, 294013, 364114],
      [327028, 330361, 315532, 327440, 332236],
      [303987, 307020, 323387, 308062, 293946],
      [445285, 422273, 397229, 369577, 409725],
      [417119, 364539, 394107, 305746, 301555]
    ],
    "type": "heatmap",
    "zauto": true
  }],
  layout: {
    "autosize": false,
    "paper_bgcolor": "rgba(255, 255, 255, 0)",
    "plot_bgcolor": "rgba(255, 255, 255, 0)",
    "xaxis": {
      "fixedrange": true,
      "domain": [0, 0.78],
      "anchor": "y"
    },
    "yaxis": {
      "fixedrange": true,
      "domain": [0, 0.78],
      "anchor": "x"
    },
    "width": 480,
    "height": 370,
    "xaxis2": {
      "fixedrange": true,
      "domain": [0.78, 1],
      "range": [0,224],
      "anchor": "y2"
    },
    "yaxis2": {
      "fixedrange": true,
      "domain": [0, 0.78],
      "range": [0,224],
      "anchor": "x2"
    },
    "shapes": [{
      "type": "path",
      "path": "M0,0M0,224M0,22H35V89H21M0,67H21V112H0M35,56H88V179H52M0,156H52V201H0",
      "xref": "x2",
      "yref": "y2"
    }]
  }
});