JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ol3js.org/en/master/css/ol.css">
<script src="http://openlayers.org/en/master/build/ol.js"></script>
<div id="map"></div>

CSS

#map {
    width: 100%;
    height: 400px;
}

JavaScript

var vectorSource = new ol.source.Vector(); 
var i, lat, lon, geom, feature, features = [];
for(i=0; i< 300; i++) {
    lat = Math.random() * 174 - 87;
    lon = Math.random() * 360 - 180;
    
    geom = new ol.geom.Point(
        ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857')
    );
    
    feature = new ol.Feature(geom);
    features.push(feature);
}    
vectorSource.addFeatures(features);

console.log(vectorSource.getFeatures());

// Create a heatmap layer based on GeoJSON content
var heatmapLayer = new ol.layer.Heatmap({
    source: vectorSource,
    radius: 20,
    blur: 40,
    opacity: 0.9,
    gradient: []
});

// Create a tile layer from OSM
var osmLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
});

// Create the map with the previous layers
var map = new ol.Map({
    target: 'map',  // The DOM element that will contains the map
    renderer: 'canvas', // Force the renderer to be used
    layers: [osmLayer, heatmapLayer],
    // Create a view centered on the specified location and zoom level
    view: new ol.View({
        center: ol.proj.transform([2.1833, 41.3833], 'EPSG:4326', 'EPSG:3857'),
        zoom: 2
    })
});