JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

  <head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>

    <style>
      html,
      body {
        height: 100%;
        margin: 1em;
      }
      
      #map {
        width: 600px;
        height: 400px;
      }

    </style>

  </head>

  <body>

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

    <script>
      var map = L.map('map').setView([30.0, 0.0], 1.1);

      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);

      // Nim users
      let jurl = "https://api.myjson.com/bins/xlhcd";

      fetch(jurl)
        .then(res => res.json())
        .then((data) => {
          data.items.forEach(function(i) {
            L.circle([i.x, i.x], 10000, {
              color: '#00d',
              fillColor: '#00d',
              fillOpacity: 0.5
            }).addTo(map).bindPopup(i.nick);
          });

        });

    </script>
  </body>

</html>