JSFiddle - React, Tailwind, and code Playground

by Aziz Natour

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://fonts.googleapis.com/css?family=Cabin:400,700|Arvo:400,700"></script>
<div id="button" class="button">
  <div></div>
  <div></div>
  <div></div>
</div>
<div id="menu" class="none">
  <nav>
    <ul>
      <li class="menu-item">
        <a href="file:///Users/scatman01/Desktop/Code/AOS3.0/AOS-Homepage.html" class="link">Home</a>
      </li>
      <li class="menu-item">
        <a href="file:///Users/scatman01/Desktop/Code/AOS3.0/AOS-Adventures.html" class="link">Adventures</a>
      </li>
      <li class="menu-item">
        <a href="file:///Users/scatman01/Desktop/Code/AOS3.0/AOS-Trail%20Reports.html" class="link">Trail Reports</a>
      </li>
      <li class="menu-item">
        <a href="file:///Users/scatman01/Desktop/Code/AOS3.0/AOS-Reviews.html" class="link">Reviews</a>
      </li>
      <li class="menu-item">
        <a href="file:///Users/scatman01/Desktop/Code/AOS3.0/AOS-about%20me.html" class="link">About</a>
      </li>
      <li class="menu-item">
        <a href="file:///Users/scatman01/Desktop/Code/AOS3.0/AOS-Gallery.html" class="link">Gallery</a>
      </li>
      <li class="menu-item">
        <a href="file:///Users/scatman01/Desktop/Code/AOS3.0/AOS-Contact.html" class="link"><i class="fa fa-envelope"></i></a>
      </li>
    </ul>
  </nav>
</div>
<div id="shadow" class="none"></div>


<div class="title">

  <h1><i class="fa fa-camera-retro"></i> The Gallery</h1>
  <p>My world as I see it.</p>
</div>

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-sm-6">
      <div class="thumbnail">
        <img src="http://www.adventuresofscatman.com/wp-content/uploads/2015/09/IMG_4276.jpg">
      </div>
    </div>
    <div class="col-lg-4 col-sm-6">
      <div class="thumbnail">
        <img...

CSS

/*<link rel="stylesheet" type="text/css" href="AOS-Gallery.css"> */
 
 html {
   height: 100%;
 }
 
 body {
   height: 100%;
   margin: 0;
   padding: .1px;
   position: relative;
   background: url(http://www.adventuresofscatman.com/wp-content/uploads/2015/09/IMG_4273.jpg);
   background-size: cover;
   overflow-x: hidden;
   font-family: arvo;
 }
 
 .button {
   position: absolute;
   top: 30px;
   right:50px;
   width: 45px;
   height: 50px;
 }
 
 .button div {
   height: 10%;
   margin-bottom:10%;
   background:#000;
   cursor: pointer;
   transition: .5s;
 }
 
 .button:hover div {
   background: rgb(139, 139, 139);
 }
 
 .menu-in,
 .menu-out {
   padding: .1px;
   width: 240px;
   height: 100%;
   background: rgba(0, 0, 0, .55);
   overflow: hidden;
   position: absolute;
   top: 0;
 }
 
 .menu-in {
   -webkit-animation: menu-in .9s forwards ease;
   z-index:2;
 }
 
 .menu-out {
   -webkit-animation: menu-out .4s forwards ease-in;
 }
 
 ul {
   margin: 68px 0 0 0;
   padding: 0;
 }
 
 .menu-item {
   display: block;
   text-decoration: none;
   color: rgb(190, 190, 190);
   font: 18px/50px arial;
   text-transform: uppercase;
   height: 50px;
   text-align: center;
   transition: .1s;
 }
 
 .link {
   display: block;
   text-decoration: none;
   color: rgb(190, 190, 190);
   font: 28px/50px arial;
   text-transform: uppercase;
   height: 50px;
   text-align: center;
   transition: .1s;
 }
 
 .link:hover {
   color: rgb(230, 230, 230);
   background: rgba(200, 200, 200, .1);
 }
 
 .shadow-in,
 .shadow-out {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   background: rgba(0, 0, 0, .4);
 }
 
 .shadow-in {
   -webkit-animation: shadow-in .9s forwards ease;
 }
 
 .shadow-out {
   -webkit-animation: shadow-out .4s forwards ease-in;
 }
 
 .none {
   display: none;
 }
 
 @-webkit-keyframes menu-in {
   0% {
     right: -240px;
   }
   100% {
     right: 0;
   }
 }
 
 @-webkit-keyframes menu-out {
   0% {
     right: 0;
   }
   100% {
    ...

JavaScript

document.getElementById('button').addEventListener('click', function() {
  showMenu();
});

document.getElementById('menu').addEventListener('click', function() {
  showMenu();
});

function showMenu() {
  console.log('click');
  var menu = document.getElementById('menu');
  var shadow = document.getElementById('shadow');
  var button = document.getElementById('button');

  menu.className = 'menu-in';
  shadow.className = 'shadow-in';
  button.className = 'none';
}

document.getElementById('shadow').addEventListener('click', function() {
  var menu = document.getElementById('menu');
  var shadow = document.getElementById('shadow');
  var button = document.getElementById('button');

  menu.className = 'menu-out';
  shadow.className = 'shadow-out';
  button.className = 'button';
});