JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#map { height: 500px; }

JavaScript

var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tiles.mapbox.com/v3/examples.map-i86nkdio/{z}/{x}/{y}.png', {
    attribution: '<a href="https://www.mapbox.com/about/maps/">&copy; Mapbox &copy; OpenStreetMap</a> | <a href="https://www.mapbox.com/map-feedback/">Improve this map</a>',
    maxZoom: 18
}).addTo(map);
var markers = new L.MarkerClusterGroup({ spiderfyOnMaxZoom: true });
for (var i=0; i<50; i++) {
    markers.addLayer(L.marker([51.5, -0.09]));
}
map.addLayer(markers);