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()) {
    mapboxgl.accessToken = "pk.eyJ1IjoibmxpbmRibGFkIiwiYSI6ImNqMmhreXUyNTAwMW0ycm12ZjA2bXg5MnQifQ.0_ronM6Ltvzr5ZbMDxJR7Q";
    var map = new mapboxgl.Map({
        container: 'map',
        center: [-1.257677, 51.752022],
        zoom: 7,
        minZoom: 5,
        maxZoom: 15,
        hash: true,
        style: 'mapbox://styles/mapbox/basic-v9'
    });

		map.on('load', function() {
    
      map["dragPan"].disable();

      map.addSource('points', {
          "type": "vector",
          "tiles": ["http://54.37.30.36:8080/data/v3/{z}/{x}/{y}.mvt"],
          "maxzoom": 15
      });
      map.addLayer({
          "id": "points",
          "type": "circle",
          "source": "points",
          "source-layer": "points",
          "layout": {},
          "paint": {
              "circle-color": "rgba(208, 23, 23, 0.5)",
              "circle-stroke-color": "rgba(158, 93, 93, 0.5)",
              "circle-radius": 10
          }
      }, 'points');
   });

}