JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="  https://cdnjs.cloudflare.com/ajax/libs/ol3/3.13.1/ol.min.css">
<script src="  https://cdnjs.cloudflare.com/ajax/libs/ol3/3.13.1/ol.min.js"></script>
 <ul class="navigation">
	<li class="nav-item"><a href="#">Home</a></li>
	<li class="nav-item"><a href="#">Portfolio</a></li>
	<li class="nav-item"><a href="#">About</a></li>
	<li class="nav-item"><a href="#">Blog</a></li>
	<li class="nav-item"><a href="#">Contact</a></li>
</ul>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger"></label>

<div class="site-wrap">
    <div id="map" class="map">

    </div>
    <div id="info">
    </div>
</div>

CSS

/* Navigation Menu - Background */
.navigation {
  /* critical sizing and position styles */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  
  /* non-critical appearance styles */
  list-style: none;
  background: #111;
}

/* Navigation Menu - List items */
.nav-item {
  /* non-critical appearance styles */
  width: 200px;
  border-top: 1px solid #111;
  border-bottom: 1px solid #000;
}

.nav-item a {
  /* non-critical appearance styles */
  display: block;
  padding: 1em;
  background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  color: white;
  font-size: 1.2em;
  text-decoration: none;
  transition: color 0.2s, background 0.5s;
}

.nav-item a:hover {
  color: #c74438;
  background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(75,20,20,0.65) 100%);
}

/* Site Wrapper - Everything that isn't navigation */
.site-wrap {
  /* Critical position and size styles */
  min-height: 100%;
  min-width: 100%;
  background-color: white; /* Needs a background or else the nav will show through */
  position: relative;
  top: 0;
  bottom: 100%;
  left: 0;
  z-index: 1;
  
  /* non-critical apperance styles */
  padding: 4em;
  background-image: linear-gradient(135deg, rgb(254,255,255) 0%,rgb(221,241,249) 35%,rgb(160,216,239) 100%);
  background-size: 200%;
}

/* map css */
#map {
    width: 100%;
    height: 100%;
}

/* Nav Trigger */
.nav-trigger {
  /* critical styles - hide the checkbox input */
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

label[for="nav-trigger"] {
  /* critical positioning styles */
  position: fixed;
  left: 15px; top: 15px;
  z-index: 2;
  
  /* non-critical apperance styles */
  height: 30px;
  width: 30px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30...

JavaScript

/* Create the map */
// setting up coordinates for map to display
var infobox = document.getElementById("info");

var city = ol.proj.transform([-73.920935,40.780229], 'EPSG:4326', 'EPSG:3857');


// setting up openlayer3 view
var view = new ol.View({
    center: city,
    zoom: 16
});


// Create the map
var map = new ol.Map({
  target: 'map',
  renderer: 'canvas',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: view
});

map.on('pointermove', function(evt) {
    // When user was dragging map, then coordinates didn't change and there's
    // no need to continue
    if (evt.dragging) {
        return;
    }
    // You can access coordinates from evt.coordinate now
});


var Data =
  [ { name: "foo",
      address: "Some Random Address 1"
    , longlat: [-73.927870, 40.763633]
    }
  , { name: "foo2",
      address: "Some Random Address 2"
    , longlat: [-73.917356, 40.763958]
    }
  , { name: "foo3",
      address: "Some Random Address 3"
    , longlat: [-73.915530, 40.779665]
    }
  , { name: "foo4",
      address: "Some Random Address 4"
    , longlat: [-73.916045, 40.779372]
    }
  , { name: "foo5",
      address: "Some Random Address 5"
    , longlat: [-73.919682, 40.777365]
    }
  , { name: "foo6",
      address: "Some Random Address 6"
    , longlat: [-73.908980, 40.776013]
    }
  ];


function buildFeature(data) {
  return new ol.Feature(
    { geometry: new ol.geom.Point(ol.proj.fromLonLat(data.longlat))
    , data: data
    }
  );
}


function curryclickonmarker(element) {
  return function (event) {
    return clickOnMarker(element, event);
  }
}

function clickOnMarker(info, event) {
  // Ovo je mnogo ruzan nacin da se dolazi do podataka
  // Treba bolje pogledati OL3 API
  // I treba imati u vidu kakvu strukturu ti imas
  // i sta ti treba, ali, resenje along the lines
  var marker = event.selected[0];
  var data = marker.G.data;


  // I ovde sada feedujes podatke u DOM
  info.innerHTML =...