JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="height: 400px"></div>

JavaScript

var heatMap;

heatMap = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'column'
    },
    title: {
        text: 'Heat Map Example'
    },
    subtitle: {
        text: 'Stacked column chart using current version of Highcharts and no plugin'
    },
    xAxis: {
        startOnTick: false,
        endOnTick: false,
        gridLineWidth: 0,

        categories: ['1', '2', '3', '4', '5'],

        labels: {
            rotation: -45,
            align: 'right'
        },
        maxPadding: 0
    },
    yAxis: {
        startOnTick: true,
        endOnTick: true,
        gridLineWidth: 0,

        categories: ['1', '2', '3', '4', '5'],

        labels: {
            formatter: function () {
                if (!this.isLast) {
                    return this.value;
                };
            },
            y: -5
        },

        title: {
            text: null
        },

    },
    legend: {
        enabled: false
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            pointPadding: 0,
            groupPadding: 0,
            lineWidth: 0,
            borderWidth: 0.5,
            borderColor: '#666666',
            shadow: false
        }
    },
    series: [{
        name: 'Stirling Red',
        data: [1, 0, 1, 0, 1],
        color: {
            linearGradient: [0, 0, 0, 400],
            stops: [
                [0, '#ff0000'],
                [1, '#990000']
            ]
        }
    }, {
        name: 'Stirling Amber',
        data: [0, 1, 0, 0, 0],
        color: {
            linearGradient: [0, 0, 0, 400],
            stops: [
                [0, '#ffff00'],
                [0.5, '#ffcc00'],
                [1, '#ffcc00']
            ]
        }
    }, {
        name: 'Stirling Green',
        data: [0, 0, 0, 1, 0],
        color: {
            linearGradient: [0, 0, 0, 400],
            stops: [
                [0, '#00cc00'],
                [0.5, '#00cc00'],
       ...