JSFiddle - React, Tailwind, and code Playground

HTML

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.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: 'https://maputnik.github.io/osm-liberty/style.json',
  center: [8.538961, 47.372476],
  zoom: 5,
  hash: true
});

var geojson = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [8.538961, 47.372476]
    },
    properties: {
      realiveOpacity: 0.25
    }
  }]
};


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

  map.addLayer({
    "id": "point",
    "type": "circle",
    "source": "point",
    "paint": {
      "circle-radius": 10,
      "circle-color": ["rgba", 255, 0, 0, ["get", "realiveOpacity"]]
    }
  });

});