JSFiddle - React, Tailwind, and code Playground

Slide Out Drawer

by Jennifer Perrin

HTML

<div class="wrap">
    <div class="slide">
    <h2>The Nifty Fifties</h2>
    </div>
  <div class="button">
    <p>Open Me</p>
  </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Yellowtail);

body{
  background-image: url(http://subtlepatterns.com/patterns/blu_stripes.png);
    margin: 0px;
}

h2{
  color: white;
    font-family: 'Yellowtail', cursive;
    font-size: 30px;
  margin: 0px;
  padding: 30px 20px 30px 0px;
  text-align: center;
}

p{
  color: white;
  cursor: pointer;
    font-family: 'Yellowtail', cursive;
    font-size: 16px;
  margin: 0px;
  padding: 0px;
  -moz-transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
}

.wrap{
  position: fixed;
  top: 35px;
}

.slide{
  background-image: url(http://subtlepatterns.com/patterns/vertical_cloth.png);
  float: left;
  width: 200px;
  z-indes: 2;
  
  -moz-border-radius: 0px 4px 4px 0px;
  -webkit-border-radius: 0px 4px 4px 0px;
  border-radius: 0px 4px 4px 0px;
  
  
  -moz-box-shadow: inset -2px 0px 10px #0d0d0d;
  --webkit-box-shadow: inset -2px 0px 10px #0d0d0d;
  box-shadow: inset -2px 0px 10px #0d0d0d;
}

.button{
  background-image: url(http://subtlepatterns.com/patterns/vertical_cloth.png);
  color: white;
  float: left;
  font-family: 'Yellowtail', cursive;
  margin: 10px 0px 0px 0px;
  padding: 30px 0px;
  z-index: 1
  
  -moz-border-radius: 0px 4px 4px 0px;
  -webkit-border-radius: 0px 4px 4px 0px;
  border-radius: 0px 10px 10px 0px;
  
  -moz-box-shadow: inset -2px 0px 50px #0d0d0d;
  -webkit-box-shadow: inset -2px 0px 50px #0d0d0d;
  box-shadow: inset -2px 0px 50px #0d0d0d;
}

.button:hover{
  -moz-box-shadow: inset -2px 0px 50px #0d0d0d;
  -webkit-box-shadow: inset -2px 0px 50px #0d0d0d;
  box-shadow: inset -2px 0px 20px #0d0d0d;
}

JavaScript

$(document).ready(function(){
  setTimeout(function(){
    $(".slide").animate({marginLeft: "-200px"});
  }, 2000);

  $(".button").click(function(){
        if($(".slide").css("marginLeft") == "-200px"){
            $(".slide").animate({marginLeft: "0px"});
        }else if($(".slide").css("marginLeft") == "0px"){
            $(".slide").animate({marginLeft: "-200px"});
        }
    });
});