JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div id="mobile-nav"><span class="glyphicon glyphicon-th-large"></span></div>
    <nav>
      <ul class="menu">
        <li><a href="#">Login</a></li>
        <li><a href="#">Register Bike</a></li>
        <li><a href="#">Where did I Parke</a></li>
        <li><a href="#">Get Route</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </nav>
  
 <input id="pac-input" class="controls" type="text" placeholder="Search Address">
    <div id="about" onclick="about()"></div>  
    <div id="map"></div>
    <script>
// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.

function initAutocomplete() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: infoWindow,
    zoom: 13,
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var infoWindow = new google.maps.InfoWindow({map: map});


  var bikeLayer = new google.maps.BicyclingLayer();
  bikeLayer.setMap(map);


// Try HTML5 geolocation.
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };

      infoWindow.setPosition(pos);
      infoWindow.setContent('Location found.');
      map.setCenter(pos);
    }, function() {
      handleLocationError(true, infoWindow, map.getCenter());
    });
  } else {
    // Browser doesn't support Geolocation
    handleLocationError(false, infoWindow, map.getCenter());
  }

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(browserHasGeolocation ?
                        'Error: The Geolocation service failed.' :
                        'Error: Your browser doesn\'t support geolocation.');
}


  //...

CSS

html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
/*MENU*/
.menu {
  list-style: none;
  line-height: 42px;
  margin: auto;
  /*outline: 1px solid red;*/
  padding-left: 0;
  width: 15em;
}
.menu a {
  background: url(icons.png) no-repeat left top;
  color: #777;
  text-decoration: none;
  text-transform: uppercase;
  display: block;
  padding-left: 3em;
  width: 100%;
}

.menu a:hover {
  margin-left: 1em;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.menu li {
  box-shadow: 3px 0 rgba(52,152,219,.2) inset;
  margin-bottom: 5px;
  padding-left: .5em;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;/*outline: 1px solid green*/
}

.menu li:hover { box-shadow: 15em 0 rgba(52,152,219,.2)inset; }

.menu li:nth-child(2) a { background-position: 0 -42px; }

.menu li:nth-child(3) a { background-position: 0 -84px; }

.menu li:nth-child(4) a { background-position: 0 -126px; }

.menu li:nth-child(5) a { background-position: 0 -168px; }

.menu li:last-child a { background-position: 0 -210px; }

/*FIN MENU*/
/*Posicion Responsive Menu*/

nav {
  
  padding-right: .25em;
  position: absolute;
  left: -18em;
  top: 0;
  padding-top: 5em;
  box-sizing: border-box;
  z-index: 20;
  height: 100%;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  background: rgba(255, 255, 255, 0.91);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

nav.active { left: 0; }

#mobile-nav {
  cursor: pointer;
  right: 10px;
  height: 30px;
  position: absolute;
  top: 10px;
  width: 30px;
  z-index: 30;
  color:#777;
  padding: 6px 0px 0px 9px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  background: white;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;

}

h1 {
  text-align: right;
  color: rgba(52,152,219,.7);
  font-size: 1.5em;
  margin-bottom: 1em;
}

article {
  padding: .5em 0;
  line-height: 1.5;
}

footer {
  font-size: 0.8em;
 ...

JavaScript

$('#mobile-nav').click(function(event) {
  $('nav').toggleClass('active');
});

function about(){
    $('#about').toggle()
}