JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://openlayers.org/en/v3.18.2/build/ol.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.18.2/css/ol.css">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="map"></div>
<div id="panel"><button id="testButton" class="btn btn-primary">TEST BUTTON</button></div>

<h1 id="title">Editing Toolbar Example2</h1>

<div id="tags">
  digitizing, point, line, linestring, polygon, editing
</div>

<p id="shortdesc">
  Demonstrate polygon, polyline and point creation and editing tools.
</p>

CSS

#panel {
  position: absolute;
  top: 30px;
  right: 100px;
}

JavaScript

var raster = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var wkt = 'POLYGON((10.689 -25.092, 34.595 ' +
  '-20.170, 38.814 -35.639, 13.502 ' +
  '-39.155, 10.689 -25.092))';

var format = new ol.format.WKT();

var feature = format.readFeature(wkt, {
  dataProjection: 'EPSG:4326',
  featureProjection: 'EPSG:3857'
});

var vector = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [feature]
  })
});

var map = new ol.Map({
  layers: [raster, vector],
  target: 'map',
  view: new ol.View({
    center: [2952104.0199, -3277504.823],
    zoom: 4
  })
});

// and the button click which makes the map make zoooom
$('#testButton').click(function(){
	console.log('click');
	map.getView().setZoom(map.getView().getZoom()+1); 
});