JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://openlayers.org/en/v3.0.0/build/ol.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css">
<script src="http://maps.google.com/maps/api/js?v=3&amp;amp;sensor=false"></script>
<div id="openlayers2" style="width: 640px; height: 480px; position: absolute;"></div>
<div id="openlayers3" style="width: 320px; height: 480px; position: absolute;"></div>

CSS

.olControlAttribution {
        right : 0;
        bottom: 0;
        background: rgba(0, 60, 136, 0.3);
        padding: 2px 4px;
        border-radius: 5px 0 0 0;
        color: white;
    }
    .olControlAttribution a {
        color: white;
    }
    .olControlAttribution a:hover {
        color: #FF8000;
    }

JavaScript

var map = new OpenLayers.Map("openlayers2", {
        layers: [
        new OpenLayers.Layer.Google("Google Streets"),
        new OpenLayers.Layer.OSM()]
    });
map.addControl(new OpenLayers.Control.LayerSwitcher());

var view = new ol.View({
    center: [0, 0],
    zoom: 2
}),

    map2 = new ol.Map({
        target: 'openlayers3',
        layers: [
        new ol.layer.Tile({
            style: 'Road',
            source: new ol.source.MapQuest({
                layer: 'osm'
            })
        })],
        view: view
    });

var movevar = false,
    startCoords, endCoords, centerCoords;
map2.on('moveend', changeView);
map.events.on({
    'moveend': changeView2
});

function changeView(evt) {
    if (movevar === false) {
        startCoords = map2.getCoordinateFromPixel([0, 0])[0];
        endCoords = map2.getCoordinateFromPixel([640, 0])[0];
        if (startCoords < 0) {
            startCoords = startCoords + 40075016.6856;
        }
        if (endCoords < 0){
            endCoords = endCoords + 40075016.6856;
        }
        if (startCoords > endCoords) {
            endCoords = endCoords + 40075016.6856;
        }
        centerCoords = startCoords + (endCoords - startCoords)/2;
        if (centerCoords > 20037508.3428) {
            centerCoords = centerCoords - 40075016.6856;
        }
        map.setCenter([centerCoords, evt.map.getView().getCenter()[1]], evt.map.getView().getZoom());
        movevar = true;
    } else {
        movevar = false;
    }
}

function changeView2(evt) {
    if (movevar === false) {
        view.setZoom(evt.object.zoom);
        startCoords = map.getLonLatFromPixel(new OpenLayers.Pixel([0,0])).lon;
        endCoords = map.getLonLatFromPixel(new OpenLayers.Pixel([map2.getSize(),0])).lon;
        if (startCoords < 0) {
            startCoords = startCoords + 40075016.6856;
        }
        if (endCoords < 0){
            endCoords = endCoords + 40075016.6856;
        }
        if (startCoords > endCoords) {
          ...