JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js"></script>
<div id="map"></div>
<button id="buttonParis">Fly to Paris</button>
<button id="buttonLondon">Fly to London</button>

CSS

#map {
    height: 500px;
}

JavaScript

var map = L.map("map");
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map);

map.setView([51.5, 0], 10);

document.getElementById("buttonParis").addEventListener("click", function () {
	map.flyTo([48.8, 2.4], 10, {
        animate: true,
        duration: 2 // in seconds
    });
});

document.getElementById("buttonLondon").addEventListener("click", function () {
	map.flyTo([51.5, 0], 10, {
        animate: true,
        duration: 2 // in seconds
    });
});