JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<div class="map-container">
    <div id="map"></div>
    <div class="map-blend"></div>
</div>

CSS

body {
    background-color: #666;
}
.map-container {
    height: 600px;
    width: 600px;
    margin: 30px auto;
    position: relative;
}
#map {
    height: 100%;
    width: 100%;
}
.map-blend {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: inset 0 0 35px 35px #666;
    pointer-events: none;
}

JavaScript

var map = L.map("map", {
            minZoom: 9,
            maxZoom: 18,
            zoomControl: false,
            attributionControl: false
        }).setView([35.260, -80.827],10);


L.tileLayer("http://maps.co.mecklenburg.nc.us/tiles/meckbase/{y}/{x}/{z}.png").addTo(map);