JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Gak!</h1>

<%-- the container which holds our mighty world map --%>
<div id="map"></div>

CSS

/* WORLD MAP CONTAINER */
#map{
  height: 800px;
  width: 100%;
}

JavaScript

var cloudmadeAPIKey = "326d39b8720e4b50a346a0740e1f2015";
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/'+cloudmadeAPIKey+'/997/256/{z}/{x}/{y}.png';
var cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade';

var littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),
denver    = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'),
aurora    = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'),
golden    = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');

var cities = L.layerGroup([littleton, denver, aurora, golden]);


var minimal   = L.tileLayer(cloudmadeUrl, {styleId: 999, attribution: cloudmadeAttribution}),
midnight  = L.tileLayer(cloudmadeUrl, {styleId: 22677,   attribution: cloudmadeAttribution}),
motorways = L.tileLayer(cloudmadeUrl, {styleId: 46561, attribution: cloudmadeAttribution});

var map = L.map('map', {
center: new L.LatLng(39.73, -104.99),
zoom: 10,
layers: [minimal, motorways, cities]
});

var baseMaps = {
    "Minimal": minimal,
    "Night View": midnight
};

var overlayMaps = {
    "Motorways": motorways,
    "Cities": cities
};

L.control.layers(baseMaps, overlayMaps).addTo(map);