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://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">
<script src="https://cdn.jsdelivr.net/npm/leaflet.path.drag@0.0.6/src/Path.Drag.min.js"></script>
<body>
<table class="table table-responsive">
  <tr>
     North <input type="text" name="north" id="north" value="" size="5" required="">
            South <input type="text" name="south" id="south" value="" size="5" required=""> 
            East <input type="text" name="east" id="east" value="" size="5" required="">
            West <input type="text" name="west" id="west" value="" size="5" required=""><input type="button" onclick="drawRectangle()" value="Draw"/></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

function drawRectangle()
{
	var lat_lon_array = [];
	var north = document.getElementById("north").value;
    var west = document.getElementById("west").value;
  var east = document.getElementById("east").value;
  var south = document.getElementById("south").value;
  var lat_lon = [[north,east],[south,west]];
  
	var rectangle = L.rectangle(lat_lon);
  
  rectangle.addTo(map);
  map.fitBounds(rectangle.getBounds());
}

var ctrl_pos = 'topright';
var startPoint = [0, 0];

var url_tile='https://gibs-{s}.earthdata.nasa.gov/wmts/epsg3857/best/BlueMarble_ShadedRelief_Bathymetry/default//EPSG3857_500m/{z}/{y}/{x}.jpeg';

var form_coord = ['north','east','south','west'];
function remove_coords()
{
   for (var i = 0; i < form_coord.length; i++)
   {
      document.getElementById(form_coord[i]).value = '';
   }
}

function add_coords(o)
{
   document.getElementById("north").value = o._northEast.lat;
   document.getElementById("west").value = o._southWest.lng;
   document.getElementById("east").value = o._northEast.lng;
   document.getElementById("south").value =o._southWest.lat;
}


var map = L.map('map', {editable: true}).setView(startPoint, 2),
    tilelayer =
    L.tileLayer(url_tile,
    { noWrap: true,
      maxZoom: 13, attribution: 'Data \u00a9 <a href="https://www.openstreetmap.org/copyright"> OpenStreetMap Contributors </a> Tiles \u00a9 HOT'
    }).addTo(map);

//L.tileLayer(overlay_tile,{noWrap:true,opacity: 0.6}).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;
           ...