JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet-routing-machine.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet-routing-machine.css">
<div id="map"></div>

CSS

#map {
  height: 100vh;
}

JavaScript

var map = L.map('map');

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var routeControl = L.Routing.control({
  waypoints: [
    L.latLng(57.74, 11.94),
    L.latLng(57.6792, 11.949)
  ]
}).addTo(map);

routeControl.on('routesfound', function(e) {
  var routes = e.routes;
  var summary = routes[0].summary;
  // alert time and distance in km and minutes
  alert('Total distance is ' + summary.totalDistance / 1000 + ' km and total time is ' + Math.round(summary.totalTime % 3600 / 60) + ' minutes');
});