JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
		chart: {
    	type: 'heatmap',
			marginTop: 60,
      },
      
      xAxis: {
      categories: ["Q1 '16", "Q2 '16", "Q3 '16", "Q4 '16", "Q1 '17", "Q2 '17", "Q3 '17", "Q4 '17", 'FY16', 'FY17'],
      opposite: true
      },
      
      yAxis: {
      	title:{
        	text: "",
         },
				 categories: ["AB","DC","EF","GH","IJ","KL","MN","OP","QR","ST","UV","WX","YZ","AA","BB"],
			},
      colorAxis: {
        minColor: '#ff0000',
				maxColor:'white',
        labels: {
        	format: '{value:.0f}'
			}
			},
      legend: {
      	align: 'right',
				layout: 'vertical',
				margin: 0,
				verticalAlign: 'top',
				y: 42,
        symbolHeight: 360,
        },
        tooltip: {
        	formatter: function () {
               return '<b>' + this.series.yAxis.categories[this.point.y] + '</b><br>'+ this.series.xAxis.categories[this.point.x] + ': ' +
					                    Highcharts.numberFormat(this.point.value,1) + '%';
				}
					        },
       series: [{
       		name: '',
					borderWidth: .2,
					color: 'white',
					data:...