JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

html,
body,
#map {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

#overlay {
    position:absolute;
    width:20%;
    height:100%;
    left:0;
    top:0;
    background-color:rgba(255,255,255,0.8);
}

JavaScript

var map = L.map('map', {
    center: [0,0],
    zoom: 3
});

L.tileLayer('http://otile1.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png', {
			maxZoom: 18,
			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>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
		}).addTo(map);

map.on('click', onMapClick);

var markers = new Array();
function onMapClick(e) {
        
        var marker = new L.Marker(e.latlng, {draggable:true});
        map.addLayer(marker);
        markers[marker._leaflet_id] = marker;
        console.log(markers);
        $('#overlay > ul').append('<li>Marker '+ marker._leaflet_id + ' - <a href="#" class="remove" id="' + marker._leaflet_id + '">remove</a></li>');
    
    // Remove a marker
    $('.remove').on("click", function() {
        // Remove the marker
        map.removeLayer(markers[$(this).attr('id')]);
        
        // Remove the link
        $(this).parent('li').remove();
        
        // Remove the marker from the array
        delete markers[$(this).attr('id')]; 
        
    });
    
};