JSFiddle - React, Tailwind, and code Playground

HTML

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

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

CSS

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

JavaScript

var map = new mapboxgl.Map({
  container: 'map',
  style: {
    version: 8,
    sources: {
      osm: {
        type: 'raster',
        tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],
        tileSize: 256,
        attribution: 'Map tiles by <a target="_top" rel="noopener" href="https://tile.openstreetmap.org/">OpenStreetMap tile servers</a>, under the <a target="_top" rel="noopener" href="https://operations.osmfoundation.org/policies/tiles/">tile usage policy</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>',
      },
    },
    layers: [{
      id: 'osm',
      type: 'raster',
      source: 'osm',
    }],
  },
});

var geojson = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "color": "#0000C0"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-46.757, 71.413]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "color": "#00C000"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-32.345, 72.816]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "color": "#C00000"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-33.046,  76.765]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "color": "#000000"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-47.109, 76.351]
      }
    }
  ]
};

map.on('load', function () {
  map.addSource('dots', {
    'type': 'geojson',
    'data': geojson,
  });

  map.addLayer({
    'id': 'dots-layer',
    'type': 'circle',
    'source': 'dots',
    'layout': {
    },
    'paint': {
      // use data-driven styling
      'circle-color': ['get', 'color'],
    },
  });
});