JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js"></script>
<div id="map" ></div>

CSS

html, body, #map {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

JavaScript

L_PREFER_CANVAS = true;
	var mymap = L.map('map').setView([51.505, -0.09], 13);
	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
		maxZoom: 18,
		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
			'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="http://mapbox.com">Mapbox</a>',
		id: 'mapbox.streets'
	}).addTo(mymap);

function getRandomInRange(from, to, fixed) {
    return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
}

for (var i = 0; i <= 500; i++) {
  setTimeout(function() {
		mymap.setView([getRandomInRange(-180, 180, 3), getRandomInRange(-180, 180, 3)], Math.floor(Math.random() * (18 - 8 + 1)) + 8);  	
    }, 100);
};