JSFiddle - React, Tailwind, and code Playground

by basti1012

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


 
  <div id="player-play"  class="player__play">
  <div id="musikinhalt">
  <div id="player">
  <div id="lcd">
    <div id="songInfo"></div>
    <div id="time"></div>
    <progress id="progreso" value="0" max="100"></progress>
  </div>
  <audio id="song"></audio>

  <button id="hamburger" onClick="expand()">
    <i class="fa fa-bars" aria-hidden="true"></i>
  </button>

  <div class="separador"></div>

  <button onClick="atras()" >
    <i class="fa fa-fast-backward" aria-hidden="true"></i>
  </button>
  <button onClick="retroceder()">
    <i class="fa fa-backward" aria-hidden="true"></i>
  </button>
  <button onClick="reproducir()">
    <i class="fa fa-play" aria-hidden="true"></i>
  </button>
  <button onClick="pausar()">
 <i class="fa fa-pause" aria-hidden="true"></i>
  </button>
  <button onClick="parar()">
  <i class="fa fa-stop" aria-hidden="true"></i>
  </button>
  <button onClick="adelantar()">
    <i class="fa fa-forward" aria-hidden="true"></i>
  </button>
  <button onClick="siguiente()" >
    <i class="fa fa-fast-forward" aria-hidden="true"></i>
  </button>

  <div class="separador"></div>

  <button id="aleatorio" onClick="aleatorio()">
    <i class="fa fa-random" aria-hidden="true"></i>
  </button>

  <button onClick="volumeDown()">
    <i class="fa fa-volume-down" aria-hidden="true"></i>
  </button>
  <button onClick="volumeUp()">
    <i class="fa fa-volume-up" aria-hidden="true"></i>
  </button>
 
  <div class="separador"></div>

  <button onClick="info()">
    <i class="fa fa-info" aria-hidden="true"></i>
  </button>
  <div id="lista"></div>
</div> 
  </div>
  <div class="player__play-inner"></div> 
	</div> 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jsmediatags/3.4.0/jsmediatags.min.js"></script>

CSS

#musikinhalt{

    opacity:0;
   display:none;
}

 






#player {
  background: brown;
  height: 160px;
  width: 250px;
 
  display: flex;
 
          justify-content: center;
 
      flex-wrap: wrap;
  border-radius: 5px;
}
progress {
  background-color: black;
  border: 0;
  width: 99%;
  height: 3px;
 
  display: flex;
 
      align-self: flex-end;
}
#lcd {
  font-family: 'Press Start 2P', cursive;
  font-size: 10px;
 
  display: flex;
 
      flex-wrap: wrap;
 
      align-self: flex-start;
 
          justify-content: space-between;
  margin-top: 10px;
  padding: 5px;
  margin-bottom: 3px;
  background: black;
  height: 55%;
  width: 95%;
  color: green;
}
#songInfo {
  height: 80%;
}
#time {
 
  display: flex;
  
      align-self: flex-end;
}
button i:hover {
  color: red;
}
.red {
  color: #e00f0f;
}
.separador {
  width: 3%;
  height: 6%;
}
#lista {
  background: #000;
  max-height: 0;
  width: 60%;
  margin: 10px;
  overflow-y: scroll;
  color: green;
  -webkit-transition: all 1s linear;
  transition: all 1s linear;
  border-radius: 5px;
}
#lista.expand {
  max-height: 140px;
  border: 5px solid brown;
}
#lista div:hover {
  cursor: pointer;
}
#lista div:active {
  color: yellow;
}












/* BUTTON */
 
.player__play {
  position:absolute;
  width:50px;
  height:50px;
		border-radius: 50%;
	position: absolute;
	padding: 5px;
	bottom: 15px;
	left: 15px;
	background :  #a15ce5;
 transition: all .5s;
 
}
#player-play.blink .player__play-inner:after,
#player-play.blink .player__play-inner:before{
  animation: color 2s infinite;
}
@keyframes color {
	0% {
		filter:hue-rotate(0deg);
	}
	30% {
		filter:hue-rotate(120deg);
	}
	60% {
		filter:hue-rotate(210deg);
	}
	100% {
		filter:hue-rotate(360deg);
	}
}

.player__play-inner {

	position: absolute;
	width: 90%;
	height: 90%;
  left:5%;
  top:5%;
	background-color: black;
	border-radius: 50%;
	display: flex;
	        justify-content: center;
	        flex-direction: column;
	       ...

JavaScript

localStorage.setItem('h',1)
  
 $('.player__play-inner').on('click', function(){

   // $('#player-play').toggleClass('wachsen');
 var h =localStorage.getItem('h')
 
    console.log(h)
  if(h == 0){
 
 

 
    $('#musikinhalt').animate({
    opacity: 0
  }, 2000, function() {
      
     $('#musikinhalt').css('display','none');
  $('#player-play').animate({
    opacity: 1,
 width:"50px",
   height: "50px",
   borderRadius:'50%',
  }, 1000, function() {
    $('.player__play-inner').animate({
  top: '3px',
 left:'3px',
 width:'90%',
 height:'90%',
 
  }, 1000, function() {

 
     $('#musikinhalt').css('display','none');   
  
  localStorage.setItem('h',1)
  });
  });
 
  });
 
  }else if(h==1){
 
   $('#player-play').animate({
    opacity: 1,
 width:"250px",
   height: "160px",
   borderRadius:'5px',
  }, 1000, function() {
    $('.player__play-inner').animate({
   bottom: '10px',
 left:'10px',
 width:'15px',
 height:'15px',
 
  }, 1000, function() {
$('#musikinhalt').css('display','block');  
    $('#musikinhalt').animate({
    opacity: 1 
  }, 2000, function() {
      
      });
     
 
 localStorage.setItem('h',0)
  });
  });

    }

  });
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

lied1 ='http://sebastian1012@sebastian1012.bplaced.net/12-willi_herren_-_ich_geh_mit_meiner_laterne-zzzz.mp3';

var songs = [];
var currentSong = 0;
var random =...