JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css">
Scroll down past the map and click on food & drink

<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>

<div id="map"></div>

<div id="layers" class="row...

CSS

#map {
    height: 500px;
    width: 500%;
}

JavaScript

var map = L.map('map', {
			center: [51.501617,-0.018582],
			zoom: 14
		});

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
		maxZoom: 18,
		id: 'jeffceriello.nd7obhnh',
    	accessToken: 'pk.eyJ1IjoiamVmZmNlcmllbGxvIiwiYSI6Ikhrakxrd00ifQ.SlVngzIXeS5UPC8UGmy1OA'
	}).addTo(map);
	map.scrollWheelZoom.disable();

	// marker
	var churchill = L.icon({
	    iconUrl: '/img/pin.png',
	    shadowUrl: '',

	    iconSize:     [43, 64], // size of the icon
	    shadowSize:   [0, 0], // size of the shadow
	    iconAnchor:   [21, 64], // point of the icon which will correspond to marker's location
	    shadowAnchor: [0, 0],  // the same for the shadow
	    popupAnchor:  [0, 0] // point from which the popup should open relative to the iconAnchor
	});
	L.marker([51.503754,-0.014841], {icon: churchill}).addTo(map);



	var geojson = {
    "type": "FeatureCollection",
    "features": [
	{
		"type": "Feature",
		"geometry": {
			"type": "Point",
			"coordinates": [-0.014782, 51.504711]
		},
		"properties": {
			"title": "Barclays Bank",
			markerColor: "#6D8AAA"
		}
	},{
		"type": "Feature",
		"geometry": {
			"type": "Point",
			"coordinates": [-0.014618, 51.504648]
		},
		"properties": {
			"title": "Idea Store",
			markerColor: "#6D8AAA"
		}
	},{
		"type": "Feature",
		"geometry": {
			"type": "Point",
			"coordinates": [-0.014532, 51.504556]
		},
		"properties": {
			"title": "James Shoe Care",
			markerColor: "#6D8AAA"
		}
	}
	]};

	shopping = L.geoJson(geojson, {
	    style: function(feature) {
	        return {color: feature.properties.markerColor};
	    },
	    pointToLayer: function(feature, latlng) {
	        return new L.CircleMarker(latlng, {radius: 8, fillOpacity: 1, stroke: false});
	    },
	    onEachFeature: function (feature, layer) {
	        layer.bindPopup(feature.properties.title);
	    }
	});

	map.addLayer(shopping);



	var geojson2 = {
    "type": "FeatureCollection",
    "features": [
	{
		"type":...