JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://openlayers.org/dev/OpenLayers.js"></script>
 <div id=map></div>

CSS

#map {
    width: 500px;
    height: 500px;
    border: 1px solid #dddddd;
}

JavaScript

map = new OpenLayers.Map('map');

baselayer = new OpenLayers.Layer('', {
    isBaseLayer: true
});

pointlayer = new OpenLayers.Layer.Vector('Original');

pointlayer.addFeatures([
    new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(10, 2)),
    new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(20, -10)),
    new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(30, 15)),
    new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(40, 5))
    ]);

pointlayer.features[0].style = OpenLayers.Util.applyDefaults({
    strokeColor: '#ff0000'
}, pointlayer.styleMap.styles.default.defaultStyle);
pointlayer.features[1].style = OpenLayers.Util.applyDefaults({
    strokeColor: '#00ff00'
}, pointlayer.styleMap.styles.default.defaultStyle);
pointlayer.features[2].style = OpenLayers.Util.applyDefaults({
    strokeColor: '#0000ff'
}, pointlayer.styleMap.styles.default.defaultStyle);
pointlayer.features[3].style = OpenLayers.Util.applyDefaults({
    strokeColor: '#000000'
}, pointlayer.styleMap.styles.default.defaultStyle);

pointlayer.redraw();

_tracklayer = new OpenLayers.Layer.PointTrack('SourceNode', {styleFrom: OpenLayers.Layer.PointTrack.SOURCE_NODE, visibility: false});
_tracklayer.addNodes(pointlayer.features);

tracklayer = new OpenLayers.Layer.PointTrack('TargetNode', {styleFrom: OpenLayers.Layer.PointTrack.TARGET_NODE, visibility: true});
tracklayer.addNodes(pointlayer.features);


map.addLayers([baselayer, _tracklayer, tracklayer,  pointlayer ]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToExtent(new OpenLayers.Bounds(-10, -16, 60, 20));