JSFiddle - React, Tailwind, and code Playground

by D S

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="app">
  <div class="blur"></div>
  <div class="mainSection">
    <div class="panel2">
      <ul>
        <li>
        <div class="leftBox">
          <div class="listNum"><span>01</span></div>
          <p class="title"><span class="playing"></span>Baridam</p>
          <p class="singer">Amir Tataloo</p>
        </div>
        <div class="rightBox">
          <div class="artwork"></div>
          <p class="duration">0:34 / 3:18</p>
          <div class="resources">
            <a href="#" class="apple"></a>
            <a href="#" class="amazon"></a>
            <a href="#" class="download"></a>
          </div>
        </div>
       
          
        </li>
        <li>hi</li>
      </ul>
    </div>
  </div>
  <div class="dashboard">
    <div class="grid-button">
      <span class="grid open"></span>
    </div>
  </div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Slabo+27px);
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%;
  bottom:0;
  border:1px solid white;
}
div.mainSection > .panel1,
div.mainSection > .panel2 {
    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);
}
/** Panel2 **/
div.panel2{
  text-align:left;
  background:rgba(0,0,0,0.5);
}
div.panel2> ul{
  overflow:scroll;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
div.panel2 > ul > li{
  width:100%;
  height:80px;
  border-bottom:solid 1px rgba(255,255,255,0.5);
  background:rgba(0,0,0,0.5);
}
div.panel2 > ul > li > div.leftBox, div.panel2 > ul > li > div.rightBox{
  height:100%;
  
}
div.panel2 > ul > li > div.leftBox{float:left; width:58%;}
div.panel2 > ul > li >...