JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#map {
    height: 180px;
}

JavaScript

var map = new L.map('map').setView([51.505, -0.09], 13);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    zoomControl: false
}).addTo(map);

map.on('contextmenu', function (e) {


    var map2 = L.marker(e.latlng).addTo(map);
    //this.addControl(map2);
});
// add a marker in the given location, attach some popup content to it and open the popup
var map1 = L.marker([51.5, -0.09], {
    draggable: true
}).addTo(map).on({
    mouseover: function () {
        var a = new MyClass();
        a.greet(this, "World");

    },
    mouseout: function () {
        this.closePopup();
    },
    dragend: function (e) {
        
       L.DomUtil.removeClass(map, 'hi')
        alert(this.getLatLng());
    }
});
var MyControl = L.Control.extend({
    initialize: function (foo, options) {
        // ...
        L.Util.setOptions(this, options);
    },
    // ...
});
L.DomEvent.addListener(map, 'click', function (e) {
var a=L.DomUtil.get('map');
 var helpContent = L.DomUtil.create('div', 'clearfix', a);
    helpContent.id = 'leaflet-control-help-display';
    helpContent.innerHTML = "this is a test";
    var fx = new L.PosAnimation();
fx.run(helpContent, [300, 500], 0.5);
});