JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css">
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js"></script>
<div id="map"></div>

CSS

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

JavaScript

if (mapboxgl.supported()) {
  var terrainTileServer = "http://127.0.0.1:9090"
  mapboxgl.accessToken = "pk.eyJ1IjoibmxpbmRibGFkIiwiYSI6ImNqMmhreXUyNTAwMW0ycm12ZjA2bXg5MnQifQ.0_ronM6Ltvzr5ZbMDxJR7Q";
  var map = new mapboxgl.Map({
    container: 'map',
    //center: [-74.579450, 5.974420],
    //center: [77.803195, 30.980707],
    center: [9.183567, 45.459823],
    zoom: 7,
    minZoom: 2,
    maxZoom: 15,
    hash: true,
    style: 'mapbox://styles/mapbox/streets-v9'
  });

  map.on('load', function() {

    map.addSource('terrain', {
      "type": "raster",
      "tiles": [terrainTileServer + "/default/{z}/{x}/{y}.png?access_token=" + mapboxgl.accessToken],
      //"tiles": ["https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=" + mapboxgl.accessToken],
      "maxzoom": 15
    });
    map.addLayer({
      "id": "terrain",
      "type": "raster",
      "source": "terrain"
    }, 'pitch-line');

  });

  map.addControl(new mapboxgl.NavigationControl());
}