JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

body, html {
	width: 100%;
	height: 100%;
}

#map {
	width: 100%;
	height: 100%;
}

JavaScript

$(document).ready(function(){
    url = "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
	var map = L.map('map').setView([0, 0], 0);

	if (typeof(Number.prototype.toRad) === "undefined") {
	  Number.prototype.toRad = function() {
	    return this * Math.PI / 180;
	  }
	}


	function getTileURL(lat, lon, zoom) {
	    var xtile = parseInt(Math.floor( (lon + 180) / 360 * (1<<zoom) ));
	    var ytile = parseInt(Math.floor( (1 - Math.log(Math.tan(lat.toRad()) + 1 / Math.cos(lat.toRad())) / Math.PI) / 2 * (1<<zoom) ));
	    return "" + zoom + "/" + xtile + "/" + ytile;
	}
	


	L.tileLayer(url, {
	    maxZoom: 18
	}).addTo(map);

	map.on('click', function (e) {
        url = getTileURL(e.latlng.lat, e.latlng.lng, map.getZoom())
		console.log(url);
        alert(url);
	});
  	
});