JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="fr">

  <head>
    <!--
            Inclusion de la bibliothèque Leaflet et sa feuille de style.
            L'include du js pourrait aussi être fait a la fin du <body>
        -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>

    <!-- Une feuille de style éventuel -->
    <link rel="stylesheet" href="style.css">

    <title>Tutoriel Leaflet OSM</title>
  </head>

  <body>
    <!-- Le conteneur de notre carte (avec une contrainte CSS pour la taille -->
    <div id="macarte" style="width:545px; height:490px"></div>

    <script>    
      var carte = L.map('macarte').setView([46.5630104, 1.4846608], 6);
      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(carte);
			var marker1 = L.marker([46.6835956, -0.4137665], {draggable:'true'}).bindPopup("").addTo(carte);
      var marker2 = L.marker([46.6835956, -0.4137665], {draggable:'true'}).bindPopup("").addTo(carte);
      var ligne = L.polyline([]).addTo(carte);

      marker1.on('dragend', findrag);
      marker2.on('dragend', findrag);
      marker1.on('drag', deplacement);
      marker2.on('drag', deplacement);
      
      function findrag(e) {
      	var mark = e.target;
        var start = marker1.getLatLng();
        var end = marker2.getLatLng();
        distance = Math.round(start.distanceTo(end) / 1000.0);
        mark.getPopup().setContent('Distance = '+distance+' km');
        mark.openPopup();
      };
      function deplacement(e) {
				ligne.setLatLngs([marker1.getLatLng(), marker2.getLatLng()]);
      }
    </script>
  </body>

</html>