JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Seleccionar POI</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.ie.css" />
    <![endif]-->
</head>
<body>
     <script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
    <div id="map" style="width: 600px; height: 250px"></div>
    <div id="debug" style="width: 800px; height: 30px; border-style:solid; border-width:1px; margin-top:10px;"></div>



</body>
</html>

JavaScript

var map = L.map('map').setView([51.508, -0.0944], 15);

L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
    maxZoom: 17
}).addTo(map);

var defaultIcon = L.icon({
    iconUrl: 'http://leafletjs.com/examples/baseball-marker.png',
    iconSize: [32, 37],
    iconAnchor: [16, 37],
    popupAnchor: [0, -28]
});

// icon used for mouseover, slightly bigger
// Update: not used anymore; the icon of the marker will be changed directly using the element of the marker;
//var highlightIcon = L.icon({
//    iconUrl: 'http://leaflet.cloudmade.com/examples/baseball-marker.png',
//    iconSize: [76, 42],
//    iconAnchor: [18, 42],
//    popupAnchor: [0, -28]
//});
var marker1 = L.marker([51.508, -0.0944], {
    icon: defaultIcon,
    opacity: 0.7
}).addTo(map);
marker1.bindPopup("icon one");

function setHighlightIcon(e) {
    var layer = e.target;
    layer.setOpacity(1.0);

    // instead of using setIcon, use directly the element of the icon
    // layer.setIcon(highlightIcon);
    var iconElem = L.DomUtil.get(layer._icon);
    iconElem.src = 'http://leafletjs.com/examples/baseball-marker.png';
    iconElem.style.height = '40px';
    iconElem.style.width = '35px';
    //     iconElem.style.marginLeft = '-17px';
    iconElem.style.marginTop = '-40px';

    var currentTime = new Date();
    document.getElementById('debug').innerHTML = "setHighlightIcon (e.type: " + e.type + ", e.target: " + L.Util.stamp(e.target) + ") @ " + currentTime;
}

function setDefaultIcon(e) {
    var layer = e.target;
    layer.setOpacity(0.7);
    layer.setIcon(defaultIcon);

    var currentTime = new Date();
    document.getElementById('debug').innerHTML = "setDefaultIcon (e.type: " + e.type + ", e.target: " + L.Util.stamp(e.target) + ") @ " + currentTime;
}

function showClickTime(e) {
    var layer = e.target;

    var currentTime = new Date();
    document.getElementById('debug').innerHTML = "showClickTime (e.type: " + e.type + ", e.target:...