JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>
<script src="http://www.cjoint.com/doc/17_04/GDBhqkOuItG_loc-infra.js"></script>
<div id="map"></div>

CSS

html,
body,
#map {
  height: 100%;
  width: 100%;
  font-family: : sans-serif;
}

JavaScript

var map = new L.map('map', {
  center: [5, 28],
  zoom: 3,
  minZoom: 2,
  maxZoom: 18,
});

L.tileLayer('http://{s}.tiles.mapbox.com/v3/ianmule.bg2v5cdi/{z}/{x}/{y}.png', {
  attribution: "Mapbox"
}).addTo(map);

function basement(feature, layer) {
  layer.bindPopup("SURPRISE")
}

var c2 = new L.geoJson(loc_infra, {
  style: {
    weight: 4,
    color: "red",
    opacity: 1,
    fillColor: "red",
    fillOpacity: 0.5
  },
  onEachFeature: basement


}).addTo(map);

map.fitBounds(c2.getBounds());