JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-path-drag@1.0.0-beta.2/src/Path.Drag.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-editable/1.2.0/Leaflet.Editable.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css">
<body>
<table class="table table-responsive">
  <tr><td id="coordinates"></td></tr>
  <tr><td><div id = "map" ></div> </td></tr>
  </table>
</body>

CSS

#navigation
{
   z-index:900;
}
img {
  border: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

#map
{
   width: 900px;
   height: 500px;
   z-index:0;
}
table.td#map_table
{
   border:red;
}
#ui-datepicker-div.datepicker
{
   z-index: 9999999;
}

JavaScript

var ctrl_pos = 'topright';
var startPoint = [-10, 10];
var tileDate='2020-12-19'
var tiles = []
tiles.push(`//gibs-{s}.earthdata.nasa.gov/wmts/epsg3857/best/MODIS_Terra_CorrectedReflectance_Bands367/default/${tileDate}/GoogleMapsCompatible_Level9/{z}/{y}/{x}.jpg`)
tiles.push(`https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/MODIS_Terra_CorrectedReflectance_Bands367/default/${tileDate}/250m/{z}/{y}/{x}.jpeg`)

let selectedTile = tiles[0];

var map = L.map('map', {editable: true}).setView(startPoint, 2),
    tilelayer =
    L.tileLayer(selectedTile,
    { noWrap: true,
      maxZoom: 13, attribution: 'Data \u00a9 <a href="https://www.openstreetmap.org/copyright"> OpenStreetMap Contributors </a> Tiles \u00a9 HOT'
    }).addTo(map);
   
L.EditControl = L.Control.extend({
        options: { position: 'topleft',callback: null,kind: '', html: ''},
        onAdd: function (map) {
            var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar'),
            link = L.DomUtil.create('a', 'custom_class_'+this.options.kind, container);
            link.href = '#';
            link.title = 'Create a new ' + this.options.kind;
            link.innerHTML = this.options.html;
            L.DomEvent.on(link, 'click', L.DomEvent.stop)
                      .on(link, 'click', function () {
                        window.LAYER = this.options.callback.call(map.editTools);
                      }, this);
            return container;
        }

    });

    L.NewRectangleControl = L.EditControl.extend({

        options: {
            position: 'topleft',
            callback: map.editTools.startRectangle,
            kind: 'rectangle',
            html: '⬛ '
        }
    });

   map.addControl(new L.NewRectangleControl());
   map.on('editable:drawing:move', function (e) { });
   map.on('editable:drawing:end', function(e)
   {
   bounds(e)
		$("a.custom_class_rectangle").on("click", function() {
         map.removeLayer(e.layer);
     });
    });
  ...