JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>

JavaScript

Highcharts.chart('container', {
    "title": {
        "text": 'Treemap Demo'
    },
    "subtitle": {
        "text": '*Notional Data'
    },
    "credits": {
    	"enabled":false
    },
    "series": [{
        "type": "treemap",
        "allowDrillToNode": true,
        "layoutAlgorithm": "sliceAndDice",
        "alternateStartingDirection": true,
        "levelIsConstant": false,
        "dataLabels": {
            "enabled": true
        },
        "levels": [{
            "level": 1,
            "layoutAlgorithm": "squarified",
            "borderWidth": 5,
            "borderColor": "#000",
            "dataLabels": {
                "enabled": true,
                "style": {
                    "fontSize": "14px",
                    "color": "#FFF"
                }
            }
        }, {
            "level": 2,
            "borderWidth": 3,
            "borderColor": "#000",
            "dataLabels": {
                "enabled": true,
                "style": {
                    "fontSize": "10px",
                    "color": "#FFF"
                }
            }
        }, {
            "level": 3,
            "borderWidth": 2,
            "borderColor": "#000",
            "dataLabels": {
                "enabled": true,
                "style": {
                    "fontSize": "10px",
                    "color": "#FFF"
                }
            }
        }],
        "data": [{
            "id": "RHC-A",
            "name": "RHC-A"
        }, {
            "id": "RHC-A-Medical",
            "name": "Medical",
            "parent": "RHC-A",
            "color": "#9cb0bb"
        }, {
            "id": "RHC-A-Dental",
            "name": "Dental",
            "parent": "RHC-A",
            "color": "#3c84ab"
        }, {
            "id": "RHC-C",
            "name": "RHC-C"
        }, {
            "id": "RHC-C-Medical",
            "name": "Medical",
            "parent": "RHC-C",
            "color": "#9cb0bb"
        }, {
           ...