JSFiddle - React, Tailwind, and code Playground

by D S

HTML

<div class="DSPlayer">
  <div class="blur"></div>
  <div class="mainSection">
    <div class="panel panel1">Panel1</div>
    <div class="panel panel2" style="display: none;">Panel2</div>
  </div>
  <div class="dashboard">
    <div class="grid-button">
      <span class="grid open"></span>
    </div>
  </div>
</div>

CSS

div.DSPlayer {
    margin:50px auto;
    width: 400px;
    height: 400px;
    border-radius:10px;
    overflow: hidden;
    position: relative;
}
div.DSPlayer > .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%;
  background:rgba(0,0,0,0.5);
  top:0;
}
div.dashboard{
  width:100%;
  height:15%;
  background:rgba(255,0,0,0.5);
  bottom:0;
}
div.mainSection > .panel1,
div.mainSection > .panel2 {
    width: 100%;
    Height: 100%;
    Background: rgba(0, 0, 0, 0.5);
    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);
}
.panel{
}
.hidden{
  display: none;
}

JavaScript

$(document).ready(function() {
    $(".grid-button").on("click", function() {
    	$(".grid").toggleClass("open close");
   		var visibleObj = $('.mainSection div:visible');
   		var inVisibleObj = $('.mainSection div:hidden');
   		visibleObj.fadeOut(500, function() {
      	inVisibleObj.fadeIn(500);
   		});
	});
});