JSFiddle - React, Tailwind, and code Playground

by Trufa

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<div class="container-fluid">
		<div class="row fluid-inline">
			<div class="col-xs-3 col-sm-12">one</div>
			<div class="col-xs-3 col-sm-12">two</div>
			<div class="col-xs-3 col-sm-12">three</div>
		</div>
		<div class="map-container row fluid-inline">
			<div class="col-sm-12">
				<div id="map" class="">

				</div>
			</div>
		</div>
	</div>

CSS

#map { height: 200px; }


@media (min-width: 768px) {
    .fluid-inline{
    display: inline-block;
  }
}

JavaScript

// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([51.505, -0.09], 13);

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

// add a marker in the given location, attach some popup content to it and open the popup
L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup. <br> Easily customizable.')
    .openPopup();