JSFiddle - React, Tailwind, and code Playground

HTML

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.css' rel='stylesheet' />

<div id='map'></div>

CSS

body {
  margin: 0;
  padding: 0;
}

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

.mapboxgl-popup {
  max-width: 400px;
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiZm9ybXVsYTQiLCJhIjoiY2ppa3J3bHB6MTFicjNrcGllYzk4Z3FpYiJ9.RMmRIRuR1zYNU8zD_0MqtA';

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/formula4/cjiwj85p95ywj2ro8wqco3g1i',
  center: [-98.50145845031738,
    29.75069181054449
  ],
  zoom: 8
});

map.on('load', function() {
  // Add a layer showing the state polygons.
  map.addLayer({
    'id': 'states-layer',
    'type': 'fill',
    'source': {
      'type': 'geojson',
      'data': {
        "type": "Feature",
        "properties": {

        },
        "geometry": {
          "type": "Polygon",
          "coordinates": [
            [
              [-98.680000305175781, 29.719999313354492],
              [-98.75, 29.629999160766605],
              [-98.370002746582031, 29.510000228881839],
              [-98.089996337890625, 29.870000839233395],
              [-98.290000915527344, 30.020000457763668],
              [-98.680000305175781, 29.719999313354492]

            ]
          ]
        }
      }
    },
    'paint': {
      'fill-color': 'rgba(60, 120, 40, 0.4)',
      'fill-outline-color': 'rgba(20, 100, 25, 1)'
    }
  });
  map.addLayer({
    'id': 'states-layer-outline',
    'type': 'line',
    'source': {
      'type': 'geojson',
      'data': {
        "type": "Feature",
        "properties": {

        },
        "geometry": {
          "type": "Polygon",
          "coordinates": [
            [
              [-98.680000305175781, 29.719999313354492],
              [-98.75, 29.629999160766605],
              [-98.370002746582031, 29.510000228881839],
              [-98.089996337890625, 29.870000839233395],
              [-98.290000915527344, 30.020000457763668],
              [-98.680000305175781, 29.719999313354492]

            ]
          ]
        }
      }
    },
    'paint': {
      'line-color': 'rgba(255, 0, 0, 1)',
      'line-width': 4
    }
  });  
});