JSFiddle - React, Tailwind, and code Playground

by Michel Durinx

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
         <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
   integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
   crossorigin=""></script>
        <script type="text/javascript" src="https://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>

    </head>

    <body>
  <div id="map"></div>
        <script type="text/javascript">
            	var tiles = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg', {
	 minZoom: 2, attribution: 'mapdata &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, styling &copy; <a href="http://stamen.com/">Stamen Design</a>', subdomains: 'abcd'});
				var map1 = L.map('map', { center: [51.5, -0.11], zoom: 9, layers: [tiles] }); 
   
//  https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png	
//	https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg
         
				// Markers in london 
				var london1 = L.marker([51.5, -0.09]).addTo(map1);
				var london2 = L.marker([51.5, -0.13]).addTo(map1);
				
        london1.bindPopup("You're such a big deal.");
        london2.bindPopup('<strong>Hello world!</strong><br>I live in <a href="https://en.wikipedia.org/wiki/London">London</a>!').openPopup(); 
				
        </script>
    </body>

CSS

#map {
              position: absolute;
              top: 0;
              right: 0;
              left: 0;
              bottom: 0;
}

.leaflet-popup {top: 55px !important;}
/* I moved the "tip" to the right location, but don't succeed in making it visible. */
.leaflet-popup-tip-container {
      top: 0px !important;
      overflow: auto important!;
 }
.leaflet-popup-tip {
      box-shadow: none !important;
      background-clip: none !important;
 }
.leaflet-popup:before 
        {
        content: "";
        position: absolute;
        border: 13px solid transparent;
        border-bottom-color: white;
        bottom: 0px;
        margin-left: -13px;
        }