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:5vw;
  height:5vw;
		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

$('.player__play-inner').on('click', function(){
   $('#player-play').toggleClass('active blink');
      $('#player-play').toggleClass('disco');
    $('#player-play').toggleClass('wachsen');
 
      $('#musikinhalt').css('display','block');
 
  $('#musikinhalt').animate({
    opacity: 1,
 width:"250px",
   height: "150px"
  }, 2000, function() {
    $('.player__play-inner').animate({
   top: '1px',
 right:'1px',
 width:'15px',
 height:'15px',
 
  }, 2000, function() {
  
  
  });
  
  });
});
  
  

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

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

songs.push('https://incompetech.com/music/royalty-free/mp3-royaltyfree/Funky%20Chunk.mp3');
songs.push('https://incompetech.com/music/royalty-free/mp3-royaltyfree/Lightless%20Dawn.mp3');
songs.push('https://incompetech.com/music/royalty-free/mp3-royaltyfree/Danger%20Storm.mp3');
songs.push('https://incompetech.com/music/royalty-free/mp3-royaltyfree/Eastern%20Thought.mp3');
songs.push('https://incompetech.com/music/royalty-free/mp3-royaltyfree/Overcast.mp3');
songs.push('https://incompetech.com/music/royalty-free/mp3-royaltyfree/Kool%20Kats.mp3');
songs.push('https://incompetech.com/music/royalty-free/mp3-royaltyfree/Dewdrop%20Fantasy.mp3');
songs.push('https://incompetech.com/music/royalty-free/mp3-royaltyfree/Carefree.mp3');
songs.push('https://incompetech.com/music/royalty-free/mp3-royaltyfree/Hitman.mp3');
songs.push('https://incompetech.com/music/royalty-free/mp3-royaltyfree/Atlantean%20Twilight.mp3');
songs.push('https://incompetech.com/music/royalty-free/mp3-royaltyfree/8bit%20Dungeon%20Boss.mp3');
songs.push('https://incompetech.com/music/royalty-free/mp3-royaltyfree/Life%20of%20Riley.mp3');


var audio = document.getElementById('song');
var lcdSongInfo = document.getElementById('songInfo');
var lcdTime = document.getElementById('time');
var progress = document.getElementById('progreso');
var...