JSFiddle - React, Tailwind, and code Playground

by Leo

HTML

<script src="//api.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="//api.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css">

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

CSS

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

JavaScript

//default token
  mapboxgl.accessToken = 'pk.eyJ1IjoibW9sbHltZXJwIiwiYSI6ImNpazdqbGtiZTAxbGNocm0ybXJ3MnNzOHAifQ.5_kJrEENbBWtqTZEv7g1-w';
  
  var map = new mapboxgl.Map({
    //style: 'mapbox://styles/mapbox/satellite-v8',
    style: 'mapbox://styles/mapbox/navigation-guidance-day-v2',
    container: 'map',
    renderWorldCopies: false,
    maxBounds: [[-180, -90], [180, 90]]
  });