JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>
<!DOCTYPE html>
  
  <title>Test V2</title>
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

  <meta charset="utf-8" />
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

  <!-- Load Leaflet from CDN-->
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
  <script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/[email protected]"></script>
  
  <!-- Load geojson-->
  <script type="text/javascript" src="js/test.js"></script>
  
  <!-- Load Esri Leaflet Geocoder from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/esri-leaflet-geocoder.css">
  <script src="https://unpkg.com/[email protected]"></script>

<body>

<div id='map'></div>

<script type="text/javascript">

//intial map rendering - zoomed all the way out.
var map = L.map('map').setView([38.951758, -76.954638], 13);

//START base maps

//add base maps to this section
  var baseMap = L.esri.basemapLayer('Imagery')//.addTo(map);
  var gbaseMap = L.esri.basemapLayer("DarkGray").addTo(map);

//add base layers i.e. labels
  L.esri.basemapLayer('DarkGrayLabels', {opacity: .5}).addTo(map);
  
//END base maps
  
//START controllers
//Location search controller
  var arcgisOnline = L.esri.Geocoding.arcgisOnlineProvider();
  var searchControl = L.esri.Geocoding.geosearch({
    providers: [
      arcgisOnline,
      L.esri.Geocoding.mapServiceProvider({
        label: 'States and Counties',
        url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer',
        layers: [2, 3],
        searchFields: ['NAME', 'STATE_NAME']
      })
    ]
  }).addTo(map);

//END controllers
  
//START mouse...

CSS

body {
    padding: 0;
    margin: 0;
  }
  html, body, #map {
    height: 100vh;
    width: 100vw;
  }
  
  .info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; } 
  .info h4 { margin: 0 0 5px; color: #777; }
  .legend { text-align: left; line-height: 18px; color: #555; } 
  .legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7;}