JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

html, body, #map {
    margin: 0;
    padding: 0;
    height: 100%;
    font: Georgia, Serif;
}

JavaScript

function markerDrag(e){
	alert("You dragged to: " + e.target.latlng);
}

function initialize() {
	// Initialize the map
	var map = L.map('map').setView([38.487, -75.641], 8);
	L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    	attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
    	maxZoom: 18
	}).addTo(map);

	// Event Handlers
	map.on('click', function(e){
		var marker = new L.Marker(e.latlng, {draggable:true});
			marker.bindPopup("<strong>"+e.latlng+"</strong>").addTo(map);

		marker.on('dragend', markerDrag(e));
	});
}
$(document).ready(initialize());