JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#map { width: 600px; height: 600px; }

JavaScript

var image   = new L.ImageOverlay('http://i.imgur.com/cW4wYeI.png', [[-40, -40], [40, 40]]);
var markers = new L.LayerGroup;

var marker_data = [
    [ 31.0, -30], [ 21.2, -20], [ 10.6, -10],
    [    0,   0],
    [-10.9,  10], [-21.5,  20], [-31.2,  30]
];
for(var i = 0; i < marker_data.length; i++)
    markers.addLayer(new L.Marker(marker_data[i]));

var map = L.map('map', {
    center: [0, 0],
    zoom: 4,
    layers: [image, markers],
    minZoom: 4,
    maxZoom: 6,
    maxBounds: [[-40, -40], [40, 40]],
    //crs: L.CRS.Simple
});