JSFiddle - React, Tailwind, and code Playground

by D S

HTML

<div class="app">
  <div class="blur"></div>
  <div class="mainSection">
    <div class="panel1">
      <ul></ul>
    </div>
    <div class="panel2" style="display: none;"></div>
    <div class="panel3" style="display: none;"></div>
  </div>
  <div class="dashboard"></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%;
  -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,
div.mainSection > .panel3 {
  width: 100%;
  Height: 100%;
  Background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0px;
  top: 0px;
}

div.mainSection > .panel3 > p {
  margin-top: 80px;
}

.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);
}

JavaScript

var tracksArray = [];
$.ajax({
  url: 'https://dl.dropboxusercontent.com/u/33538012/playlist.xml',
  dataType: "xml",
  success: parse,
  error: function() {
    alert("Error: Something went wrong");
  }
});
function parse(document) {
  $(document).find("track").each(function() {
    tracksArray.push($(this).find('url').text());
    
    $(".panel1 ul").append(
      "<li id='row" + tracksArray.length + "'>" +
      "<p class='title'>" + $(this).find('title').text() + "</p>" +
      "</li>"
    );

  });
}


$(".panel1 ul li").on("click", function() {
  alert("done!");
})