JSFiddle - React, Tailwind, and code Playground

by Tristen Brown

HTML

<link rel="stylesheet" href="https://api.mapbox.com/mapbox-assembly/mbx/v1.2.0/assembly.min.css">
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v3.0.0/mapbox-gl.css">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.0.0/mapbox-gl.js"></script>
<div id="map" class="absolute top bottom left right w-full"></div>

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoibWVuZ3lpbmdmYW4iLCJhIjoiY2w0ZTM4NGl3MDBkbzNwb2Fvd2o5eXBwbCJ9.Xw4239eAmuQ3ZI0tvrRuCQ';

const style = {
  "version": 8,
  "name": "xray",
  "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
  "projection": { "name": "globe" },
  "fog": {
    "color": "#0F2127",
    "high-color": "#000",
    "space-color": "#000",
    "horizon-blend": 0.5
  },
  "layers": [{
      "id": "bg",
      "type": "background",
      "paint": {
        "background-color": "#000"
      }
    },
    {
      "id": "raster:mapbox.mapbox-terrain-dem-v1",
      "source": "mapbox.mapbox-terrain-dem-v1",
      "type": "raster",
      "paint": {
        "raster-opacity": 0.125,
        "raster-saturation": 0
      }
    },
    {
      "id": "fill:mapbox.mapbox-streets-v8:landuse",
      "source": "mapbox.mapbox-streets-v8",
      "type": "fill",
      "source-layer": "landuse",
      "paint": {
        "fill-color": "rgba(81, 109, 140, .75)",
        "fill-opacity": 0.125,
        "fill-outline-color": "rgba(81, 109, 140, .75)"
      },
      "filter": [
        "==",
        [
          "geometry-type"
        ],
        "Polygon"
      ]
    },
    {
      "id": "fill:mapbox.mapbox-streets-v8:waterway",
      "source": "mapbox.mapbox-streets-v8",
      "type": "fill",
      "source-layer": "waterway",
      "paint": {
        "fill-color": "rgba(81, 109, 140, .75)",
        "fill-opacity": 0.125,
        "fill-outline-color": "rgba(81, 109, 140, .75)"
      },
      "filter": [
        "==",
        [
          "geometry-type"
        ],
        "Polygon"
      ]
    },
    {
      "id": "fill:mapbox.mapbox-streets-v8:water",
      "source": "mapbox.mapbox-streets-v8",
      "type": "fill",
      "source-layer": "water",
      "paint": {
        "fill-color": "rgba(81, 109, 140, .75)",
        "fill-opacity": 0.125,
        "fill-outline-color": "rgba(81, 109, 140, .75)"
      },
      "filter": [
        "==",
        [
          "geometry-type"
      ...