JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<base target="_top">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<title>GeoJSON tutorial - Leaflet</title>
	
	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	
</head>
<body>

<div id='map'></div>

</body>
</html>

CSS

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

JavaScript

// Create a map
let map = L.map("map", {
  center: [40, 30],
  zoom: 4
});

L.tileLayer(
  "https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png",
  {attribution:'CARTO'}
).addTo(map);

axios.request({
    method: "get",
    url: `https://api.nnb.isprambiente.it/collections/obspoint/items?f=json&limit=100&canonicalname=Turdus%20merula`,
  })
  .then(function(response) {
    var geojson = L.geoJson(response.data, {
      // Pop Up
      onEachFeature: function(feature, layer) {
        layer.bindPopup(`<p>${feature.properties.canonicalname}</p>`);
      },
      // Style
      pointToLayer: function(feature, latlng) {
        return L.circleMarker(latlng, {
          radius: 8,
          fillColor: "#fabada",
          color: "#000",
          weight: 1,
          opacity: 1,
          fillOpacity: 0.8
        });
      }
    }).addTo(map);
  });