JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.5/leaflet.markercluster.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.5/MarkerCluster.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.5/MarkerCluster.Default.css">
<body>
  <div id="map">
  </div>
</body>

CSS

#map {
  width: 500px;
  height: 500px;
}

.myClusterRed {
  background: red;
  height: 40px;
  width: 40px;
  border-radius: 100%;
  text-align: center;
  vertical-align: middle;
  font-size: 18px;
}

.myClusterYel {
  background: yellow;
  height: 40px;
  width: 40px;
  border-radius: 100%;
  text-align: center;
  vertical-align: middle;
  font-size: 18px;
}

JavaScript

// Patch Leaflet.markercluster's MarkerCluster (i.e. the markers that represent a cluster)
// so that they use the pane specified by the MarkerClusterGroup options, if any.
L.MarkerCluster.include({
  initialize: function(group, zoom, a, b) {

    var latLng = a ? (a._cLatLng || a.getLatLng()) : new L.LatLng(0, 0),
      options = {
        icon: this
      },
      pane = group.options.pane; // Read the MarkerClusterGroup's pane, if any.
    
    // If a pane is specified, add it to the MarkerCluster's options.
    if (pane) {
    	options.pane = pane;
    }

    L.Marker.prototype.initialize.call(this, latLng, options);

		// Remaining code is unchanged compared to original method.
    this._group = group;
    this._zoom = zoom;

    this._markers = [];
    this._childClusters = [];
    this._childCount = 0;
    this._iconNeedsUpdate = true;
    this._boundsNeedUpdate = true;

    this._bounds = new L.LatLngBounds();

    if (a) {
      this._addChild(a);
    }
    if (b) {
      this._addChild(b);
    }
  }
});

//map creation
var map = L.map('map').setView([44, 5], 6);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 18
}).addTo(map);


//custom panes with different z-index
var lowPane = map.createPane("lowlevel");
map.getPane('lowlevel').style.zIndex = 610;

var midPane = map.createPane("midlevel");
map.getPane('midlevel').style.zIndex = 630;

var hiPane = map.createPane("hilevel");
map.getPane('hilevel').style.zIndex = 650;


//2 marker cluster groups
var clustRed = L.markerClusterGroup({
  pane: 'hilevel',
  iconCreateFunction: function(cluster) {
    return L.divIcon({
      html: '<span style="line-height: 40px;">' + cluster.getChildCount() + '</span>',
      className: 'myClusterRed',
      iconSize: L.point(40, 40)
    });
  }
});

var clustYellow = L.markerClusterGroup({
  pane: 'lowlevel',
  iconCreateFunction: function(cluster) {
    return L.divIcon({
      html: '<span style="line-height: 40px;">' +...