JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="https://raw.githubusercontent.com/GustavAT/NinjaArrows.js/master/js/ninjaarrows-openlayers-v1.1.js"></script>
<div id="map"></div>

CSS

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

JavaScript

var map, osm, featureLayer, ninjaArrows, points = [],
    point;

map = new OpenLayers.Map("map");
osm = new OpenLayers.Layer.OSM();
featureLayer = new OpenLayers.Layer.Vector("Point Layer");
map.addLayers([osm, featureLayer]);
map.setCenter(new OpenLayers.LonLat(14.289268, 46.642138).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")), 10);

for (var i = 0; i < 100; i++) {
    point = new OpenLayers.Geometry.Point(13 + 2 * Math.random(), 46 + 2 * Math.random());
    points.push(point);
    featureLayer.addFeatures([new OpenLayers.Feature.Vector(point)]);
}
ninjaArrows = new NinjaArrows(points, featureLayer, {
    projection: "wgs1984",
    style: {
        type: "gradient",
        resolution: 50,
        maximum: 50
    }
});