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: rgb(249, 249, 249);
}
.map-container {
    height: 500px;
    width: 500px;
    margin: 30px auto;
    position: relative;
}
#map {
    height: 100%;
    width: 100%;
}
.map-blend {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(https://lh3.googleusercontent.com/-6reS1rd7Gks/Uop1Ev_mhBI/AAAAAAAAECs/PKVaBVFT5Bw/s800/map-blend.png);
    background-size: 100% 100%;
    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);