JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <link href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" rel="stylesheet" />
    <script type="text/Javascript" src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
    <script type="text/Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
    <div id="map"></div>
</body>
</html>

CSS

#map {
    display:block;
    margin-left:auto;
    margin-right:auto;
    margin-top:0;
    height:768px;
    width:768px;
    background-color:white;
}   
     
.info {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
}
.info h4 {
    margin: 0 0 5px;
    color: #777;
}

JavaScript

var t1          = L.circle([11, 40], 500000, {
                                                color: 'blue',
                                                fillColor: 'blue',
                                                fillOpacity: 0.5,
                                                title: 'town'
                                                });
       
                t1.on('click', onMarkerClick);   
 
                 function onMarkerClick(e) {
                        var coordinates = e.latlng.toString();
                        coordinates = coordinates.substring(7,coordinates.length);
                        coordinates = coordinates.substring(0, coordinates.length-1);
                        info.update(coordinates, 'test');
                }