JSFiddle - React, Tailwind, and code Playground

by grant

HTML

<div id="map"></div>

CSS

body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }

    .mapboxgl-popup {
        max-width: 400px;
        font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    }
.marker {
  background-image: url('//lrio.com/kml/icons/grape.png');
  background-size: cover;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}

JavaScript

// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com
	mapboxgl.accessToken = 'pk.eyJ1IjoidHJlZGRpbndhdGVyIiwiYSI6ImNqZmcxcjA1dzVnaWIzM3BkMTV6eDZ5aHUifQ.M09nRNeuyA1lg6qzFkDQyw';

    const map = new mapboxgl.Map({
        container: 'map',
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        style: 'mapbox://styles/mapbox/streets-v12',
        center: [-118.194,50.9989],
        zoom: 11.15
    });

    map.on('load', () => {
        map.addSource('places', {
            // This GeoJSON contains features that include an "icon"
            // property. The value of the "icon" property corresponds
            // to an image in the Mapbox Streets style's sprite.
            'type': 'geojson',
            'data': {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [
                    "-118.1689",
                    "51.6323"
                ]
            },
            "properties": {
                "area_name": "Adamants",
                "base_elev": 920,
                "lat": "51.6323",
                "lng": "-118.1689",
                "date": "2023-02-04",
                "alp": "high",
                "tln": "considerable",
                "btl": "considerable",
                "area_code": "AD",
                "snow_last24_hours": 5,
                "snow_last7_days": 55,
                "snow_base_depth": 180,
                "temp_min_from_snowbase": -6,
                "temp_max_from_snowbase": 0,
                "am_sky_condition_from_snowbase": "Cloudy; thin cloud cover",
                "alpine_fx_forecasts": [
                    {
                        "period": "Today",
                        "icon_code": "16",
                        "text_summary": "Mainly cloudy with isolated flurries.",
                        "temp": -2,
  ...