JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://leafletjs.com/dist/leaflet.js"></script>
<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css">
<div id="map"></div>

CSS

#map{
    width: 300px;
    height: 300px;
    
}

JavaScript

// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([51.505, -0.09], 13);

// 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);

map.on('mouseout', function(e) {
    map.dragging.disable();
});

map.on('mouseover', function(e) {
    map.dragging.enable();
});