JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <title>demo</title>
    <style>
      .map {
        height: 400px;
        width: 100%;
      }

    </style>
    <title>OpenLayers example</title>
  </head>

  <body>
    <h2>SoCal Earthquake Prediction</h2>
    <div class="map" id="map"></div>
  </body>

</html>

JavaScript

var Feature = ol.Feature;
  var Map = ol.Map;
  var View = ol.View;
  var LineString = ol.geom.LineString,
    Point = ol.geom.Point,
    Polygon = ol.geom.Polygon;
  var defaultInteractions = ol.interaction.defaults,
    PointerInteraction = ol.interaction.Pointer
  var TileLayer = ol.layer.Tile,
    VectorLayer = ol.layer.Vector;
  var TileJSON = ol.source.TileJSON,
    VectorSource = ol.source.Vector;
  var Fill = ol.style.Fill,
    Icon = ol.style.Icon,
    Stroke = ol.style.Stroke,
    Style = ol.style.Style;

  var Drag = (function(PointerInteraction) {
    function Drag() {
      PointerInteraction.call(this, {
        handleDownEvent: handleDownEvent,
        handleDragEvent: handleDragEvent,
        handleMoveEvent: handleMoveEvent,
        handleUpEvent: handleUpEvent
      });

      this.coordinate_ = null;
      this.cursor_ = 'pointer';
      this.feature_ = null;

      this.previousCursor_ = undefined;
    }

    if (PointerInteraction) Drag.__proto__ = PointerInteraction;
    Drag.prototype = Object.create(PointerInteraction && PointerInteraction.prototype);
    Drag.prototype.constructor = Drag;

    return Drag;
  }(PointerInteraction));


  function handleDownEvent(evt) {
    var map = evt.map;

    var feature = map.forEachFeatureAtPixel(evt.pixel,
      function(feature) {
        return feature;
      });

    if (feature) {
      this.coordinate_ = evt.coordinate;
      this.feature_ = feature;
    }

    return !!feature;
  }

  function handleDragEvent(evt) {
    var deltaX = evt.coordinate[0] - this.coordinate_[0];
    var deltaY = evt.coordinate[1] - this.coordinate_[1];

    var geometry = this.feature_.getGeometry();
    geometry.translate(deltaX, deltaY);

    this.coordinate_[0] = evt.coordinate[0];
    this.coordinate_[1] = evt.coordinate[1];
  }

  function handleMoveEvent(evt) {
    if (this.cursor_) {
      var map = evt.map;
      var feature = map.forEachFeatureAtPixel(evt.pixel,
        function(feature) {
          return...