JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.js"></script>
<div id="map"></div>

CSS

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

JavaScript

/* Example of a raw circle */
var features = [];
var circle = new ol.geom.Circle([-1500, 0], 1000);
features.push(new ol.Feature({
    geometry: circle
}));
var vectorSource = new ol.source.Vector({
    features: features
});
var layer = new ol.layer.Vector({
    source: vectorSource,
    style: [
    new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'blue',
            width: 3
        }),
        fill: new ol.style.Fill({
            color: 'rgba(0, 0, 255, 0.1)'
        })
    })]
});

/* Example of a low poly circle */
var features2 = [];
var circle2 = new ol.geom.Circle([1500, 0], 1000);
var lowpoly = ol.geom.Polygon.circular(
    /* WGS84 Sphere */
    new ol.Sphere(6378137),
    circle2.getCenter(),
    circle2.getRadius(),
    /* Number of verticies */
    64);
features2.push(new ol.Feature({ geometry: lowpoly }));
var vectorSource2 = new ol.source.Vector({
    features: features2
});
var layer2 = new ol.layer.Vector({
    source: vectorSource2,
    style: [
    new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'red',
            width: 3
        }),
        fill: new ol.style.Fill({
            color: 'rgba(255, 0, 0, 0.1)'
        })
    })]
});


var map = new ol.Map({
    layers: [layer, layer2],
    target: 'map',
    view: new ol.View({
        center: [0, 0],
        zoom: 14
    })
});