JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Leaflet Demo</title>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>

    <link href='https://unpkg.com/[email protected]/dist/leaflet.css' rel='stylesheet' />
    <link href="https://unpkg.com/[email protected]/dist/MarkerCluster.css" rel='stylesheet' />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'https://raw.githubusercontent.com/akq/Leaflet.DonutCluster/master/src/Leaflet.DonutCluster.js',
            true);


        xhr.onreadystatechange = function () { //Call a function when the state changes.
            if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
                eval(this.responseText);
                var markers = L.DonutCluster({
                    chunkedLoading: true
                }, {
                    key: 'title',
                    arcColorDict: {
                        A: 'red',
                        B: 'blue',
                        C: 'yellow',
                        D: 'black'
                    }
                })

                for (var i = 0; i < points.length; i++) {
                    var a = points[i];
                    var title = a[2];
                    var marker = L.marker(L.latLng(a[0], a[1]), {
                        title: title
                    });


                    marker.bindPopup(title);
                    markers.addLayer(marker);
                }

               ...