JSFiddle - React, Tailwind, and code Playground

by Ganesh Salunkhe

HTML

<body>
		<nav>
		</nav>

		<div id="painel">
			<div id="map-container">
				<div id="map">
				</div>
				<ul id="map-interface">
					<li>asda</li>
					<li>asd</li>
					<li>asdsad</li>
				</ul>
			</div>
		</div>

		<script src="jquery-1.11.2.min.js"></script>
		<script src="main.js"></script>
	</body>

CSS

body {
	margin:					0;
	padding:				0;
}

nav {
	-webkit-transition:		width 0.3s;
	-moz-transition:		width 0.3s;
	-o-transition:			width 0.3s;
	transition:				width 0.3s;
	position:				fixed;
	height:					100%;
	width:					60px;
	background:				blue;
	z-index:				1;
}

nav:hover {
	width:					200px;
}

div#painel {
	padding-left:			60px;
	background:				red;
	width:					calc(100%-60px);
	display:				block;
	z-index:				0;
	text-align:				center;
}

div#map-container {
	padding:				0px 0 20px;
	width:					100%;
	background:				green;
	text-align:				center;
}

#map-interface,
div#map {
	display:				inline-block;
	border:					0;
	padding:				0;
	margin:					0;
}

#map-interface {
	background:				gray;
	list-style: 			none;
	margin-left:			-4px;
	height:					488px;
}

JavaScript

$(document).ready(function() {
	$("#map").prepend('<img src="images/d2.png">');

	var width = $("#map > img").attr("width");
	$("#actions").css("width", width);
});