JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<section id="location">
    <div id="map-container">
        <div>
            <p>Hello</p>
        </div>
        <div id="map"></div>
    </div>
</section>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

CSS

section {
    position: relative;
    display: block;
    padding: 1em;
    background: gold;
    overflow: hidden;
}
#map-container {
    position: relative;
    height: 100%;
}
#map {
    height: 100%;
}

JavaScript

var section = document.querySelector('section');

section.style.height = '250px';

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var marker = L.marker([51.5, -0.09]).addTo(map);

marker.bindPopup('<h1>Yo!</h1><p>Well hi there, welcome to this amazing popup.</p><p>See you later!</p><pre>(c) 2014</pre>');