JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
<div id="mapContainer">

    <div id="mapOptions" class="tabbable-panel tab-right">
        <div class="tab"><a href="#" onclick="$('#mapContainer').toggleClass('options-open');">Map Options</a></div>
        <div class="content">
            <h2 class="content-title">Title</h2>
            <p>Text blah blah</p>
        </div>
    </div>

    <div id="map-containerDiv" class="tabbable-target">
        <div id="map"></div>
    </div>
    
</div>

CSS

#mapContainer { width:100%;height:350px;position:relative; }
#map-containerDiv { position:absolute;top:0;left:0;right:0;bottom:0;z-index:0; }
#map { height: 100%; width: 100%; }
#mapOptions { width:23.84%;position:absolute;top:0;left:-23.84%;bottom:0;z-index:1;box-shadow:-2px 0 5px rgba(0,0,0,0.1);z-index:99 }

.tabbable-panel { border-left:1px solid #5cffff; }
.tabbable-panel .tab { width:1px;height:1px;position:absolute;top:20px;left:-31px;-ms-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);transform:rotate(-90deg);-ms-transform-origin:bottom right;-moz-transform-origin:bottom right;-webkit-transform-origin:bottom right;transform-origin:bottom right; }
.tabbable-panel .tab a { height:30px;padding:0 15px;border:1px Solid #5cffff;border-bottom:0;border-radius:10px 10px 0 0;text-decoration:none;line-height:30px;float:right;white-space:nowrap;outline:none; }
.tabbable-panel .tab a:hover { color:white;background:#24ccda; }
.tabbable-panel .tab a:focus { color:white; }
.tabbable-panel .content { padding:20px;position:absolute;top:0;left:0;right:0;bottom:0;overflow:auto; }
.tabbable-panel.tab-right { border-left:none;border-right:1px solid #5cffff; }
.tabbable-panel.tab-right .tab { left:auto;right:-31px;-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg);-ms-transform-origin:bottom left;-moz-transform-origin:bottom left;-webkit-transform-origin:bottom left;transform-origin:bottom left; }
.tabbable-panel.tab-right .tab a { float:left; }
.tabbable-panel,.tabbable-target { -ms-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; }


#mapContainer.options-open #map-containerDiv { left:23.84%; }
#mapContainer.options-open #mapOptions { left:0; }

JavaScript

var map = L.map('map', {
	center: [55, -4.5],
	zoom: 4
});

L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map);