JSFiddle - React, Tailwind, and code Playground

by Nico

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css">
<div class="wrapper">
<div class="listWrapper">
?
</div>
<div class="mapWrapper">
<div id='map'></div>
</div>
</div>


<div id="locate">
Locate me
</div>
<div id="fullsscreen">
full
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoicmF1bW9iaWwiLCJhIjoiY2o3YWppMjR3MGRjNzJ3cDdnZHFxbXRjOSJ9.6Ybvb8Qmb1e51d8l0cqFEg';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
    center: [8.8, 48.8], // starting position [lng, lat]
    zoom: 9 // starting zoom
});
var marker = new mapboxgl.Marker({
    draggable: true
})
    .setLngLat([8.8, 48.8])
    .addTo(map);
</script>

CSS

#map {
  width:300px;
  height: 300px;
}

.wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-content: stretch;
	align-items: flex-start;
}

.listWrapper {
	order: 0;
	flex: 0 1 150px;
	align-self: auto;
}

.mapWrapper {
	order: 1;
	flex: 1 0 auto;
	align-self: auto;
}