JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://npmcdn.com/leaflet@1.0.0-rc.3/dist/leaflet-src.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.0.0/dist/leaflet.js"></script>
<div id="map"></div>

CSS

#map {
    height: 500px;
}

JavaScript

var map = L.map("map");
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map);

map.setView([48.85, 2.35], 12);

map.createPane("pane250").style.zIndex = 250; // between tiles and overlays
map.createPane("pane450").style.zIndex = 450; // between overlays and shadows
map.createPane("pane620").style.zIndex = 620; // between markers and tooltips
map.createPane("pane800").style.zIndex = 800; // above popups

// Dummy layers just to build a GeoJSON object.
var geojsonData = L.layerGroup([
	L.rectangle([[48.84, 2.33], [48.86, 2.37]]),
  L.marker([48.84, 2.33]),
  L.marker([48.835, 2.35])
]).toGeoJSON();

// Group that will receive modified layers, with user specified panes.
var newGroup = L.layerGroup();

L.geoJSON(geojsonData, {
	onEachFeature: function (feature, layer) {
  	switch (feature.geometry.type) {
    	case "Polygon":
      	newGroup.addLayer(L.geoJSON(feature, {
        	pane: "pane450",
          style: { fillOpacity: 0.8 }
        }).bindPopup("polygon in pane450"));
        break;
      case "Point":
        newGroup.addLayer(L.marker(layer.getLatLng(), { pane: "pane250" }).bindPopup("marker in pane250"));
        break;
      default: // Add the layer as-is
        newGroup.addLayer(layer);
    }
  }
});

newGroup.addTo(map);

// Other layers with normal behaviour.
L.rectangle([[48.83, 2.34], [48.87, 2.36]], {
	color: "red"
}).bindPopup("Red rectangle in normal overlay pane (z-index 400)").addTo(map);

L.marker([48.855, 2.35]).bindPopup("Marker in normal markers pane (z-index 600)").addTo(map);