JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, 
      width=device-width" />
    <script src="https://js.api.here.com/v3/3.0/mapsjs-core.js" 
      type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.0/mapsjs-service.js" 
      type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.0/mapsjs-ui.js" 
      type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" 
      href="https://js.api.here.com/v3/3.0/mapsjs-ui.css" />
  </head>
  <body>
  <div style="width: 640px; height: 480px" id="mapContainer"></div>
  <script>
  
    // Initialize the platform object:
    var platform = new H.service.Platform({
    'app_id': 'app_id',
    'app_code': 'app_code'
    });
    
    // Via:
    // https://developer.here.com/documentation/geovisualization/topics/js-initialize-map.html
    //
    // createTileLayer (tileType, scheme, tileSize, format, opt_additionalParameters, opt_opacity, opt_dark, opt_options) : {H.map.layer.TileLayer}
    var normalLayer = platform.getMapTileService({type: 'base'}).createTileLayer(
      'maptile',
      'reduced.night',
      256,
      'png'
    );    
    
    var satelliteLayer = platform.getMapTileService({type: 'aerial'}).createTileLayer(
      'maptile',
      'satellite.day',
      256,
      'png8'
    );    
    
    // Instantiate (and display) a map object:
    // H.Map(element := {Element}, baseLayer := {H.map.layer.Layer}, opt_options := {H.Map.Options=} [optional])
    // Via:
    // https://developer.here.com/documentation/maps/topics_api/h-map.html
    var map = new H.Map(
      document.getElementById('mapContainer'),
      normalLayer,
      {
        pixelRatio: 1,
        center:  new H.geo.Point(40.769832, -73.974726),
        zoom: 14
      }
    );
    
    // Optional: create a barebones Object to mimic the H.service.DefaultLayers object
    // returned by...