JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" 
  integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
  integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>
<script src="https://cdn.db-ip.com/js/dbip.js" 
  data-api-key="p6bcac47ae71f0285cb6343d9697e56e41a2cb92">
  // Replace the demo key above with your own API key
</script>

Welcome visitor !
<div id="map" style="height:350px"></div>

<script>
  dbip.getVisitorInfo().then(addrInfo => {
    let map = L.map("map"),
      coords = [addrInfo.latitude, addrInfo.longitude];
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    L.marker(coords).addTo(map);
    map.setView(coords, 10);
  });
</script>