JSFiddle - React, Tailwind, and code Playground

HTML

<div id="map" class="map"></div>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
   integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>

CSS

.map {
    height: 400px;  /* The height is 400 pixels */
    width: 100%;  /* The width is the width of the web page */
}

JavaScript

function makeMap() {
  var center = [49, 14];
  var map = L.map('map').setView(center, 10);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  var icons = [
    L.icon({
      iconAnchor: [12, 32],
      iconUrl: 'https://blahos.com/blog/maps-leafletjs/pin-red.png'
    }),
    L.icon({
      iconAnchor: [12, 32],
      iconUrl: 'https://blahos.com/blog/maps-leafletjs/pin-pink.png'
    }),
    L.icon({
      iconAnchor: [12, 32],
      iconUrl: 'https://blahos.com/blog/maps-leafletjs/pin-green.png'
    }),
    L.icon({
      iconAnchor: [12, 32],
      iconUrl: 'https://blahos.com/blog/maps-leafletjs/pin-violet.png'
    })
  ];
  var markers = {};
  for (var i = 1; i < 6; i++) {
    var mul = 2 == i ? 1.1 : i;
    var m = L.marker([49.0, 13.8 + 0.1 * mul], {
      icon: icons[1]
    }).addTo(map);
    m.value = 160;
    m.bindTooltip("Initial: " + m.value);
    m.on("click", function(e) {
      console.log("Value on the clicked marker: ", this.value);
    });
    markers[i] = m;
  }

  function updateMarkers() {
    var m = markers[Math.floor(Math.random() * 5) + 1];
    m.value = Math.floor(Math.random() * 300);
    var zindex = 1;
    if (m.value < 75) {
      m.setIcon(icons[0]);
      zindex = 5;
    } else if (m.value < 150) {
      m.setIcon(icons[1]);
      zindex = 4;
    } else if (m.value > 200) {
      m.setIcon(icons[3]);
      zindex = 3;
    } else {
      m.setIcon(icons[2]);
    }
    m.setZIndexOffset(zindex);
    m.setTooltipContent("Value: " + m.value);
  }
  setInterval(updateMarkers, 1000);
}
window.addEventListener('DOMContentLoaded', (event) => {
  makeMap();
});