JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://openlayers.org/en/master/build/ol.js"></script>
<link rel="stylesheet" href="https://openlayers.org/en/master/css/ol.css">
<div id="map"></div>

JavaScript

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      title: 'basemap',
      source: new ol.source.Stamen({ layer: 'toner' })
    }),
    new ol.layer.Image({
      source: new ol.source.ImageCanvas({
        canvasFunction: function (extent, resolution, pixelRatio, size, projection) {
          var canvas = document.createElement('canvas');
          canvas.width = size[0];
          canvas.height = size[1];

          var context = canvas.getContext('2d');
          // begin custom shape
          context.beginPath();
          context.moveTo(170, 80);
          context.bezierCurveTo(130, 100, 130, 150, 230, 150);
          context.bezierCurveTo(250, 180, 320, 180, 340, 150);
          context.bezierCurveTo(420, 150, 420, 120, 390, 100);
          context.bezierCurveTo(430, 40, 370, 30, 340, 50);
          context.bezierCurveTo(320, 5, 250, 20, 250, 50);
          context.bezierCurveTo(200, 5, 150, 20, 170, 80);

          // complete custom shape
          context.closePath();
          context.lineWidth = 5;
          context.fillStyle = '#8ED6FF';
          context.fill();
          context.strokeStyle = 'blue';
          context.stroke();

          return canvas;
        },
        projection: 'EPSG:3857'
      })
    })
  ],
  target: 'map',
  view: new ol.View({
    center: ol.proj.fromLonLat([-97, 38]),
    zoom: 4
  })
});