JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://api.tiles.mapbox.com/mapbox.js/v2.1.7/mapbox.js"></script>
<link rel="stylesheet" type="text/css" href="https://api.tiles.mapbox.com/mapbox.js/v2.1.7/mapbox.css">
<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js"></script>
<link rel="stylesheet" type="text/css" href="https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css">
<link rel="stylesheet" type="text/css" href="https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css">
<div id="map"></div>

CSS

#map { height: 500px; }

JavaScript

L.mapbox.accessToken = 'pk.YOURPRIVATEKEY';
var map = L.mapbox.map('map', 'examples.map-i86nkdio')
        .setView([51.5, -0.09], 17);
var markers = new L.MarkerClusterGroup({
  showCoverageOnHover: false,
  maxClusterRadius: 20
});
for (var i=0; i<5; i++) {
    markers.addLayer(L.marker([51.5, -0.09]));
}
//map.addLayer(markers);
var layerGroup = L.layerGroup();
markers.addTo(layerGroup);
layerGroup.addTo(map);
MAP = map;
MM = markers;