JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html>
<head>
	<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
	<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css" />
	<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css" />
	<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
  <style>
    .circle{
      border-radius:60px;
      background-color:red;
    }
  </style>
</head>
<body>
	<div id="map" style="width:500px;height:500px;"></div>
	<script type="text/javascript">
			
		var map = new L.Map('map', {
			zoomSnap: 0,
			zoomDelta: 1,
			wheelPxPerZoomLevel: 100
		});
		L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
			maxZoom: 22
		}).addTo(map);
		var markers = new L.MarkerClusterGroup({
			showCoverageOnHover: false,
			zoomToBoundsOnClick: false,
			spiderfyDistanceMultiplier: 6,
      spiderfyOnMaxZoom: true,
      iconCreateFunction: function(){
      	return L.divIcon({
        	iconSize:L.point(25,25),
        	className: 'circle'
        });
      }
		});
    markers.on("clusterclick", function(c){
      // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
      let WORKAROUND = false;
    	if (WORKAROUND && map.getZoom() != map.getMaxZoom())
    		c.layer.unspiderfy();
     
			c.layer.zoomToBounds({
     		paddingTopLeft: [50+20, 50+40],
				paddingBottomRight: [50+20+125, 50+20]
      });
		});
		markers.addTo(map);
		map.fitWorld();
		
		let p = [
			L.marker([39.28542,-76.60682]),
			L.marker([39.28542,-76.60682]),
			L.marker([39.28542,-76.60682]),
      L.marker([39.28542,-76.60682]),
      L.marker([39.28542,-76.60682])
		];
		// add some markers
		setTimeout(function(){
			markers.addLayers(p);
		}, 250);
	</script>
</body>
</html>