JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

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

JavaScript

mapboxgl.accessToken = 'pk.eyJ1Ijoia2Vud29vZG1hcHMiLCJhIjoiY2o2czZxMjg2MDEyNTJ3cGRqM2FvdHc4diJ9.TP8cfPrAE_oKWDPIY_Mvaw';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-100.04, 38.907],
    zoom: 3
});

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


map.addLayer({
        'id': 'testlayer',
        'type': 'fill',
           "source": {
            "type": "geojson",
            "data": {
                "type": "FeatureCollection",
                "features": [{
                    "type": "Feature",
                    "geometry": {
                        "type": "Polygon",
                        "coordinates": [[[-100, 40],
                        [-120, 40],
                        [-120, 30],
                        [-100, 30]]]
                    },
                    "properties": {
                        "name": "TEST 1"
                    }
                }, {
                    "type": "Feature",
                    "geometry": {
                        "type": "Polygon",
                        "coordinates": [[[-95, 35],
                        [-115, 35],
                        [-115, 25],
                        [-95, 25]]]
                    },
                    "properties": {
                        "name": "TEST 2"
                    }
                }]
            }
        },
        
        'layout': {},
        'paint': {
            'fill-color': '#088',
            'fill-opacity': 0.5
        }
    });
    

    // When a click event occurs on a feature in the states layer, open a popup at the
    // location of the click, with description HTML from its properties.
map.on('click', 'testlayer', function (e) {
    new mapboxgl.Popup()
        .setLngLat(e.lngLat)
        .setHTML(e.features.map(function(feature) { return feature.properties.name; })
        .join('<hr/>'))
        .addTo(map);
});
    // Change the cursor to a pointer when the mouse is over the states layer.
   ...