JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css">
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<div id="map" class="smallmap"></div>

JavaScript

var map, layer;
map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
"https://vmap0.tiles.osgeo.org/wms/vmap0", {layers:'basic'} );
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(0, 0), 0);
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new  OpenLayers.Icon('https://www.openlayers.org/dev/img/marker.png',size,offset);


marker = new OpenLayers.Marker(new OpenLayers.LonLat(0,0), icon);
var newLon = marker.lonlat.lon + 20;
var newlonlat = new OpenLayers.LonLat(newLon,0);
var px = map.getPixelFromLonLat(newlonlat);

marker.events.register('mousedown', marker, function(evt) { var newLon = marker.lonlat.lon + 20;
var newlonlat = new OpenLayers.LonLat(newLon,0);
var px = map.getPixelFromLonLat(newlonlat);
marker.moveTo(px);
OpenLayers.Event.stop(evt); });

markers.addMarker(marker);
 map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();