JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://openlayers.org/dev/OpenLayers.js"></script> 

<div id="map" style="width: 600px; height: 480px; border: 1px solid black"></div>

JavaScript

var map = new OpenLayers.Map({
    div: 'map',
    allOverlays: true,
    controls: [],
    fractionalZoom: true
});    
    
var layer = new OpenLayers.Layer.Vector('Layer', {
    rendererOptions: { zIndexing: true }, 
    styleMap: new OpenLayers.StyleMap({
        'default': {
            fillColor: '#a9a8a7',
            strokeColor: '#ffffff',
            strokeWidth: 1,
            graphicZIndex: 10
        },
        'select': {
            fillColor: '#a9a8a7',
            strokeColor: '#5d7cc4',
            strokeWidth: 5,
            cursor: 'pointer',
            graphicZIndex: 100
        }
    })
});
map.addLayer(layer);



var format = new OpenLayers.Format.WKT();
var features = [
    format.read('POLYGON((0 0, 100 0, 100 50, 0 50, 0 0))'),
    format.read('POLYGON((0 0, 0 -50, 100 -50, 100 0, 0 0))')
];
layer.addFeatures(features);

map.zoomToExtent(layer.getDataExtent());


var hoverControl = new OpenLayers.Control.SelectFeature(
    [layer],
    {
        hover: true,
        highlightOnly: true
    }
);
map.addControl(hoverControl);
hoverControl.activate();