JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/leaflet.css">
<button id="fit1">fit without bounds</button>
<button id="fit2">fit with bounds</button>
<div id="map"></div>

CSS

body {
    padding: 0;
    margin: 0;
}

#map {
    height: 300px;
    margin-top: 10px;
}

JavaScript

var map = L.map('map').setView([51.505, -0.09], 5);

// add an OpenStreetMap tile layer
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 southWest = new L.LatLng(40.712, -74.227),
    northEast = new L.LatLng(40.774, -74.125),
    bounds = new L.LatLngBounds(southWest, northEast);

L.marker([40.712, -74.227]).addTo(map);
L.marker([40.774, -74.125]).addTo(map);

map.fitBounds(bounds);

$('#fit1').click(function(){ map.fitBounds(bounds); });
$('#fit2').click(function(){ map.fitBounds(bounds, {padding: [50, 50]}); });