JSFiddle - React, Tailwind, and code Playground

by D S

HTML

<div class="app">
  <div class="blur"></div>
  <div class="mainSection">
    <div class="panel1">
      <div>panel1</div>
      <div>panel1</div>

    </div>
    <div class="panel2" style="display: none;">
      <div>panel2</div>
    </div>
    <div class="panel3" style="display: none;">
      <ul>
        <li class="facebook"></li>
        <li class="twitter"></li>
        <li class="googleplus"></li>
        <li class="email"></li>
      </ul>
    </div>
  </div>
  <div class="dashboard">
    <button class="panel2">button1</button>
    <button class="panel3">button2</button>
  </div>
</div>

CSS

div.app {
  margin: 50px auto;
  width: 400px;
  height: 400px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

div.app > .blur {
  width: 100%;
  height: 100%;
  background: url(http://goo.gl/0VTd9W);
  -webkit-filter: blur(5px);
}

div.mainSection,
div.dashboard {
  position: absolute;
  left: 0px;
  text-align: center;
  color: #fff;
  font-size: 20px;
}

div.mainSection {
  width: 100%;
  height: 85%;
  top: 0;
}

div.dashboard {
  width: 100%;
  height: 15%;
  background: rgba(255, 0, 0, 0.5);
  bottom: 0;
}

div.mainSection > .panel1,
div.mainSection > .panel2,
div.mainSection > .panel3 {
  width: 100%;
  Height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
}

.grid-button {
  background: none;
  border: none;
  padding: 3px;
  width: 100%;
}

.grid {
  display: inline-block;
  height: 4px;
  position: relative;
  width: 32px;
  transition: all 0.3s ease-in-out;
}

.grid:after,
.grid:before {
  content: '';
  position: absolute;
  background-color: #FFF;
  display: inline-block;
  height: 4px;
  left: 0;
  width: 32px;
  transition: all 0.3s ease-in-out;
}

.grid.open {
  background-color: #FFF;
}

.grid.open:after {
  top: 10px;
}

.grid.open:before {
  top: -10px;
}

.grid.close {
  background-color: transparent;
  transform: scale(0.9);
}

.grid.close:after,
.grid.close:before {
  top: 0;
  transform-origin: 50% 50%;
}

.grid.close:before {
  transform: rotate(135deg);
}

.grid.close:after {
  transform: rotate(45deg);
}

.panel3 > ul {
  overflow: scroll;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.panel3 > ul > li {
  width: 100%;
  height: 85px;
  background-repeat: no-repeat;
}

.panel3 > ul > li:hover {
  background: rgba(255, 255, 255, 0.8);
}

.panel3 > ul > li.facebook {
  background: rgba(59, 89, 152, 0.5) url('https://dl.dropboxusercontent.com/u/33538012/icons/facebook.jpg');
}

.panel3 > ul > li.twitter {
  background: rgba(85, 172, 238, 0.5)...

JavaScript

$(function() {
  $("button.panel2").on("click", function() {
    var visibleObj = $('.mainSection > div:visible');
    if ($("div.panel2").css("display") == "none") {
      var inVisibleObj = $("div.panel2")
    } else {
      var inVisibleObj = $("div.panel1")
    }
    visibleObj.fadeOut(500, function() {
      inVisibleObj.fadeIn(500);
    })
  });


  $("button.panel3").on("click", function() {
    var visibleObj = $('.mainSection > div:visible');
    if ($("div.panel3").css("display") == "none") {
      var inVisibleObj = $("div.panel3")
    } else {
      var inVisibleObj = $("div.panel1")
    }
    visibleObj.fadeOut(500, function() {
      inVisibleObj.fadeIn(500);
    })
  });
});