JSFiddle - React, Tailwind, and code Playground

HTML

<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>

CSS

#map{
    width:450px;
    height:400px;
}

            /* avoid pink tiles */
            .olImageLoadError {
                background-color: transparent !important;
            }

JavaScript

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

var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
	"http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});

var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
map.addLayers([wmsLayer,polygonLayer]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());


map.setCenter(new OpenLayers.LonLat(0, 0), 3);

var pt1=new OpenLayers.Geometry.Point(-2,-2);
var pt2=new OpenLayers.Geometry.Point(-2,2);
var pt3=new OpenLayers.Geometry.Point(2,2);
var pt4=new OpenLayers.Geometry.Point(2,-2);

var ring=new OpenLayers.Geometry.LinearRing([pt1, pt2, pt3, pt4]);
var poly=new OpenLayers.Geometry.Polygon([ring]);

var feat=new OpenLayers.Feature.Vector(poly, {}, {fillColor:'red', fillOpacity:0.4});

polygonLayer.addFeatures([feat]);