JSFiddle - React, Tailwind, and code Playground

by grant

JavaScript

let url = '//api.avalanche.ca/forecasts/en/metadata'
 url = '//api.avalanche.ca/forecasts/en/products/855334fc-d1e4-4e5a-ad27-89d9dc53c2d6_19e987dd4d3e83b1d0176c44688493e5738d06841c61f4da55a3ddd3ee8dedfd'
let data = [
	{
		"product": {
			"slug": "c940fec5-acea-47db-81cc-24e4f4973c06_11403c144a201989b6c1bd5ade6da4f0505bac36d2c2def0af8f9afdbc8cd99b",
			"type": "avalancheforecast",
			"title": "c940fec5-acea-47db-81cc-24e4f4973c06",
			"id": "c940fec5-acea-47db-81cc-24e4f4973c06_11403c144a201989b6c1bd5ade6da4f0505bac36d2c2def0af8f9afdbc8cd99b",
			"reportId": "c940fec5-acea-47db-81cc-24e4f4973c06_11403c144a201989b6c1bd5ade6da4f0505bac36d2c2def0af8f9afdbc8cd99b"
		},
		"area": {
			"id": "11403c144a201989b6c1bd5ade6da4f0505bac36d2c2def0af8f9afdbc8cd99b",
			"name": "c940fec5-acea-47db-81cc-24e4f4973c06",
			"bbox": [
				-120.337638,
				49.000135,
				-118.27871,
				51.83133883618677
			]
		},
		"icons": [
			{
				"type": "ratings",
				"from": "0001-01-01T00:00:00Z",
				"to": "9999-12-31T00:00:00Z",
				"ratings": {
					"alp": "moderate",
					"tln": "moderate",
					"btl": "low"
				},
				"graphic": {
					"id": "moderate-moderate-low",
					"url": "https://assets.avalanche.ca/graphics/forecast/rating/moderate-moderate-low.svg",
					"alt": ""
				}
			}
		],
		"centroid": {
			"longitude": -119.23687632886556,
			"latitude": 50.39041252301082
		},
		"url": "https://avalanche.ca/en/forecasts/c940fec5-acea-47db-81cc-24e4f4973c06_11403c144a201989b6c1bd5ade6da4f0505bac36d2c2def0af8f9afdbc8cd99b",
		"owner": {
			"value": "avalanche-canada",
			"display": "avalanche-canada",
			"isExternal": false,
			"url": "avalanche-canada"
		},
		"highestDanger": {
			"value": "moderate",
			"display": "Moderate",
			"colour": "yellow"
		}
	},
	{
		"product": {
			"slug": "46473a6e-0c0f-4d85-a254-c0060de18454_137ffc6e9349456897bce5227011e6eeca49b34b865b9d54d3fad4ce5bf31035",
			"type": "avalancheforecast",
			"title": "46473a6e-0c0f-4d85-a254-c0060de18454",
			"id":...