JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
        />
        <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
        <script src="https://api.windy.com/assets/map-forecast/libBoot.js"></script>
        <style>
            #windy {
              height: 600px;
              width: 100%;
            }
        </style>
    </head>
    <body>
        <div id="windy"></div>
        <script src="script.js"></script>
    </body>
</html>

JavaScript

const options = {
  // Required: API key
  key: 'PhJ9kJ1oxIgEEOJDhmDZLzt6E8hroAv4', // REPLACE WITH YOUR KEY !!!

  // Put additional console output
  verbose: true,

  // Optional: Initial state of the map
  lat: 50.4,
  lon: 14.3,
  zoom: 5,
};

// Initialize Windy API
windyInit(options, windyAPI => {
  // windyAPI is ready, and contain 'map', 'store',
  // 'picker' and other usefull stuff

  const {
    map
  } = windyAPI;
  // .map is instance of Leaflet map
  
  map.options.minZoom = 4;
  map.options.maxZoom = 17;

  L.tileLayer(
    "https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
      minZoom: 12,
      maxZoom: 17,
    }
  ).addTo(map);
});