JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://openlayers.org/en/v3.1.1/build/ol.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.1.1/css/ol.css">
<body>
    <div id="map" class=map></div>
</body>

CSS

.map {
  height:600px;
  width: 600px;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  overflow:hidden;
  margin:auto;
  position:relative;
}

JavaScript

var my_layer = new ol.layer.Tile({
    source: new ol.source.MapQuest({layer: 'sat'})
})

var map = new ol.Map({
    target: 'map',
    layers: [my_layer],
    view: new ol.View({
        center: [-12245.6653498,6704064.05491],
        zoom: 10,
    }),
});