JSFiddle - React, Tailwind, and code Playground

by felixp

HTML

<html>

  <head>
    <!-- FONT -->
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet" />
    <!-- h3-js is required -->
    <script src="https://unpkg.com/h3-js@^3.0.0"></script>
    <script src="https://unpkg.com/[email protected]/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/[email protected]/dist.min.js"></script>

    <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
  </head>

  <body style="
      margin: 0;
      padding: 0;
      overflow: hidden;
      font-family: 'Open Sans', sans-serif;
    ">
    <div id="map" style="width: 100vw; height: 100vh;"></div>
  </body>

  <script type="text/javascript">
    deck.carto.setDefaultCredentials({
      apiBaseUrl: "https://gcp-us-east1-02.dev.api.carto.com",
      accessToken:...