JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<script src="https://fonts.googleapis.com/css?family=Muli:400,300"></script>
<div class="container">
<div class="toggle-overlay">Toggle Me</div>
</div>


<aside>
  <div class="outer-close toggle-overlay">
    <a class="close"><span></span></a>
  </div>
  <nav>
    <ul>
      <li><a href="#!">Features</a></li>
      <li><a href="#!">Pricing</a></li>
      <li><a href="#!">Documentation</a></li>
      <li><a href="#!">About</a></li>
    </ul>
  </nav>
</aside>

SCSS

.container {
	padding: 60px 15px;
	text-align: center;
	max-width: 100%;
  height:2000px;
  background-color:white;
}

.toggle-overlay {
  background-color:red; 
  }
  
.open {
	opacity: 1;
	visibility: visible;
}


aside {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: black;
	opacity: 0;
	visibility: hidden;
	transition: all .5s ease;
	z-index: 2;
}



.close {
	position: fixed;
	top: 40px;
	right: 60px;
	color: white;
	z-index: 3;
	cursor: pointer;
	font-family: sans-serif;
}
.outer-close {
    position: absolute;
    right: 0;
    top: 0;
    width: 85px;
    height: 85px;
    cursor: pointer;
}

JavaScript

$(function() {
    $('.toggle-overlay').click(function() {
      $('aside').toggleClass('open');
    });
  });