JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

html,body,#map { width:100%; height:100%; margin:0; }

JavaScript

var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.MapQuest({layer: 'sat'})
          })
        ],
        view: new ol.View({
          center: ol.proj.transform([0,20], 'EPSG:4326', 'EPSG:3857'),
          zoom: 3
        })
      });

var vectorSource = new ol.source.Vector();
var vectorLayer = new ol.layer.Vector({	source:vectorSource });
map.addLayer(vectorLayer);

drawInteraction = new ol.interaction.Draw({ source:vectorSource, type:"MultiPolygon" });
map.addInteraction(drawInteraction);

var formatGeoJSON = new ol.format.GeoJSON();

drawInteraction.on('drawend', function(e) {
	var feature = e.feature; 
	// clone feature:
	var featureClone = feature.clone();
	// transform cloned feature to WGS84:
	featureClone.getGeometry().transform('EPSG:3857', 'EPSG:4326');
	// get GeoJSON of feature:
	var geojson = formatGeoJSON.writeFeature(featureClone);
	// save or do whatever...
	console.log(geojson);
});