JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.js"></script>
<link rel="stylesheet" href="http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.css">
<script src="http://leafletjs.com/examples/us-states.js"></script>
<div id='map'></div>
<div id='detail_info'></div>

CSS

body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; } 
        #detail_info { position:absolute; z-index:9999; bottom:32px; left:32px; width:100%; } 
        
.map-legend i {
        width: 18px;
        height: 18px;
        float: left;
        margin-right: 8px;
        opacity: 0.7;
    }
    .leaflet-popup-close-button {
        display: none;
    }
    .leaflet-popup-content-wrapper {
        pointer-events: none;
    }

JavaScript

// Based on the Leaflet example from http://leafletjs.com/examples/choropleth.html

    var map = L.mapbox.map('map', 'examples.map-vyofok3q').setView([37.8, -96], 4);

    var legend = L.mapbox.legendControl().addLegend(getLegendHTML()).addTo(map);

    var popup = new L.Popup({ autoPan: false });

    // statesData comes from the 'us-states.js' script included above
    var statesLayer = L.geoJson(statesData,  {
        style: getStyle,
        onEachFeature: onEachFeature
    }).addTo(map);

    function getStyle(feature) {
        return {
            weight: 2,
            opacity: 0.1,
            color: 'black',
            fillOpacity: 0.7,
            fillColor: getColor(feature.properties.density)
        };
    }

    // get color depending on population density value
    function getColor(d) {
        return d > 1000 ? '#8c2d04' :
            d > 500  ? '#cc4c02' :
            d > 200  ? '#ec7014' :
            d > 100  ? '#fe9929' :
            d > 50   ? '#fec44f' :
            d > 20   ? '#fee391' :
            d > 10   ? '#fff7bc' :
            '#f00';
    }

    function onEachFeature(feature, layer) {
        layer.on({
            mousemove: mousemove,
            mouseout: mouseout,
            click: getDetails
        });
    }

    var closeTooltip;

    function mousemove(e) {
        var layer = e.target;

        popup.setLatLng(e.latlng);
        popup.setContent('<h2>' + layer.feature.properties.name + '</h2>' +
            layer.feature.properties.density + ' people per square mile');

        if (!popup._map) popup.openOn(map);
        window.clearTimeout(closeTooltip);

        // highlight feature
        layer.setStyle({
            weight: 3,
            opacity: 0.3,
            fillOpacity: 0.9
        });

        if (!L.Browser.ie && !L.Browser.opera) {
            layer.bringToFront();
        }
    }

    function mouseout(e) {
        statesLayer.resetStyle(e.target);
        closeTooltip = window.setTimeout(function() {
 ...