JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css">
<script src="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script>
<script src="//cdn.jsdelivr.net/leaflet.esri/latest/esri-leaflet.js"></script>
<script src="https://cdn-geoweb.s3.amazonaws.com/esri-leaflet-geocoder/1.0.0-rc.4/esri-leaflet-geocoder.js"></script>
<link rel="stylesheet" href="https://cdn-geoweb.s3.amazonaws.com/esri-leaflet-geocoder/1.0.0-rc.4/esri-leaflet-geocoder.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
  <div  style="min-height: 600px; width: 100%; height: 100%; position: absolute" id="dvMapContainer">
        <fieldset class="scheduler-border">
            <legend class="scheduler-border">
                Permit Map

            </legend>

            <div class="form-group">
                <div id="mapRemovableContainer"  style="height: 600px; width: 100%"></div>
            </div>
            <div id="dvExtraMapFunct" href="#" class="alert-warning pull-left btn-xs" style="width: 26px; height: 10px; margin-top: -455px; margin-left: 10px; position: relative; z-index: 999;">
                <input id='check' type='checkbox'>
                <label class='main' for='check'>
                    <div class='title'> <i class='fa fa-bars'></i> </div>
                </label>
                <div class="container">
                    <a class="plate">
                        <i class="fa fa-map-marker" id="dvClearMarker"></i>
                    </a> <a class="plate">
                        <i class="fa fa-tree" id="dvTopoMarker"></i>
                    </a> <a class="plate">
                        <i class="fa fa-street-view" id="dvStreetMarker"></i>
                    </a><a class="plate">
                        <i class="fa fa-globe" id="dvLayerMarker"></i>
                    </a>
                </div>
            </div>
        </fieldset>
    </div>

CSS

#map {
      bottom: 0;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
  }
  #check {
      display: none;
  }
  .main, .container {
      margin: auto;
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      width: 34px;
      height: 28px;
      border-radius: 20%;
  }
  .main {
      background: ghostwhite;
      box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.35);
      cursor: pointer;
      z-index: 50;
  }
  .main:hover {
      background: linen;
  }
  .main:active {
      box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.35), inset 1px 2px 2px rgba(0, 0, 0, 0.35);
      /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e0f3fa+0,d8f0fc+50,b8e2f6+51,b6dffd+100;Shape+2+Style */
      background: #e0f3fa;
      /* Old browsers */
      background: -moz-linear-gradient(top, #e0f3fa 0%, #d8f0fc 50%, #b8e2f6 51%, #b6dffd 100%);
      /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e0f3fa), color-stop(50%, #d8f0fc), color-stop(51%, #b8e2f6), color-stop(100%, #b6dffd));
      /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, #e0f3fa 0%, #d8f0fc 50%, #b8e2f6 51%, #b6dffd 100%);
      /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, #e0f3fa 0%, #d8f0fc 50%, #b8e2f6 51%, #b6dffd 100%);
      /* Opera 11.10+ */
      background: -ms-linear-gradient(top, #e0f3fa 0%, #d8f0fc 50%, #b8e2f6 51%, #b6dffd 100%);
      /* IE10+ */
      background: linear-gradient(to bottom, #e0f3fa 0%, #d8f0fc 50%, #b8e2f6 51%, #b6dffd 100%);
      /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0f3fa', endColorstr='#b6dffd', GradientType=0);
      /* IE6-9 */
  }
  .main .title {
      margin: auto;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 80px;
      font-size: 1.5em;
      line-height: 80px;
     ...

JavaScript

function darken(element) {
        $("#" + element).removeClass("lightmap");
        $("#" + element).addClass("darkmap");
    }

    function lighten(element) {
        $("#" + element).addClass("lightmap");
        $("#" + element).removeClass("darkmap");
    }

    $(document).ready(function () {

        //Set Initial Style for the Menu Items
        lighten('dvClearMarker');
        lighten('dvTopoMarker');
        lighten('dvStreetMarker');

        //Check to see if Map exists else add Map
        $("#mapRemovableContainer").html('<div id="map" style="position:absolute; width:900px;height:900px;"></div>');
        if (typeof map === "undefined") {
            var map = L.map("map").setView([39.7910, -86.1480], 7);
        }

      


        ShowMap();

   
     
        //Show the Map
        function ShowMap() {
            var marker;
            var markers = new L.FeatureGroup();

            L.esri.basemapLayer("Gray").addTo(map);


            var EPSLayer = L.esri.dynamicMapLayer("https://gis.in.gov/arcgis/rest/services/DOT/EPS_Map_2015/MapServer", {
                opacity: 0.5,
           useCors: false
            }).addTo(map);

            var tiles = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { opacity: 08 }).addTo(map);


            var gisDay = new L.esri.Geocoding.Controls.Geosearch.Providers.FeatureLayer({
                url: 'https://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/GIS_Day_Final/FeatureServer/0',
                searchFields: ['Name', 'Organization'], // Search these fields for text matches
                label: 'GIS Day Events', // Group suggestions under this header
                formatSuggestion: function(feature) {
                    return feature.properties.Name + ' - ' + feature.properties.Organization; // format suggestions like this.
                }
            });


            //Search Control
            var searchControl = new L.esri.Geocoding.Controls.Geosearch({
     ...