JSFiddle - React, Tailwind, and code Playground

by codemeasandwich

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content='True' name='HandheldFriendly' />
<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;'/>
<meta name="viewport" content="width=device-width" />
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/splash/splash-icon.png"/>
<link rel="apple-touch-startup-image" href="images/splash/splash-screen.png"  media="screen and (max-device-width: 320px)" />
<link rel="apple-touch-startup-image" href="images/splash/[email protected]" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" />
<link rel="apple-touch-startup-image" sizes="640x1096" href="images/splash/[email protected]" />
<link rel="apple-touch-startup-image" sizes="1024x748" href="images/splash/splash-screen-ipad-landscape" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : landscape)" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="images/splash/splash-screen-ipad-portrait.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : portrait)" />
<link rel="apple-touch-startup-image" sizes="1536x2008" href="images/splash/splash-screen-ipad-portrait-retina.png"   media="(device-width: 768px)	and (orientation: portrait)	and (-webkit-device-pixel-ratio: 2)"/>
<link rel="apple-touch-startup-image" sizes="1496x2048" href="images/splash/splash-screen-ipad-landscape-retina.png"   media="(device-width: 768px)	and (orientation: landscape)	and (-webkit-device-pixel-ratio: 2)"/>


<div id="menu">
        <ul>
            <li><a href="#">Menu...

CSS

* {
    padding: 0px;
    margin: 0px;
}

#menubar {
    width:100%;
    background-color:#444;
    color: #fff;
    padding: 10px;
}

#button {
    cursor:pointer;
}


#menu li a {
    padding: 10px;
    display: block;
    color: white;
    text-decoration: none;
}

#right {
    width:100%;
    background-color: #fff;
    z-index: 5;
    position: fixed;
    left: 0px;
    height: 100%;
}

#right p {
    padding: 10px;
}

#menu {
    float:left;
    width: 350px;
    height: 100%;
}

#menu li {
    background-color:#444;
    border-bottom: 1px solid #888;
}

#map {
     height: 150px;
     width: 100%;
        margin: 0px;
        padding: 0px
      }

JavaScript

jQuery(document).ready(function () {
    var map;
    var centerPosition = new google.maps.LatLng(40.747688, -74.004142);

    var options = {
        zoom: 16,
        center: centerPosition,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map($('#map')[0], options);

    var marker = new google.maps.Marker({
        position: centerPosition,
        map: map
    });
});

$('#button').toggle( 
    function() {
        $('#right').animate({ left: 250 }, 'slow', function() {
            $('#button').html('Close');
        });
    }, 
    function() {
        $('#right').animate({ left: 0 }, 'slow', function() {
            $('#button').html('Menu');
        });
    }
);