JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.2/dist/leaflet.css">
<script src="https://npmcdn.com/leaflet@1.0.0-rc.2/dist/leaflet-src.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);

// Create necessary panes in correct order (i.e. "bottom-most" first).
map.createPane("polygonsPane");
map.createPane("linesPane");
map.createPane("pointsPane");

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

// Polygon.
var rectangle = L.rectangle([
	[48.84, 2.33],
  [48.86, 2.37]
], {
	pane: "polygonsPane", // If you comment out the `pane` options, vector layers will retrieve their normal behaviour, i.e. appear above all others when last added to map.
  fillOpacity: 1
}).addTo(map);

// Line.
var line = L.polyline([
	[48.83, 2.32],
  [48.87, 2.38]
], {
	pane: "linesPane",
  color: "red"
}).addTo(map);

// Point (circleMarker actually)
var point = L.circleMarker([48.85, 2.35], {
	pane: "pointsPane",
  color: "green"
}).addTo(map);

// Layers Control to switch on/off each layer individually.
L.control.layers(null, {
	Rectangle: rectangle,
  Line: line,
  Point: point
}, {
	collapsed: false
}).addTo(map);