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

.player__play {
		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: relative;
	width: 40px;
	height: 40px;
	background-color: black;
	border-radius: 50%;
	display: flex;
	        justify-content: center;
	        flex-direction: column;
	        align-items:center;
}

.player__play-inner::after,
.player__play-inner::before {
	content:'';
     
	display: block;
	height: 0;
	width: 0;
	border-color:transparent;
        transform: translateX(2px);
	transition: all 1.5s;
  
}

.player__play-inner::after {
	border-top: 8px solid #a15ce5;
	border-right: 10px solid transparent;
	border-left: none;
	border-top-style: ;
	top: 50%;
	
}
.player__play-inner::before {
	border-bottom: 8px solid #a15ce5;
	border-right: 10px solid transparent;
	border-left: none;
	left: 50%;
}

.active .player__play-inner::before {

	border-right: 7px solid #a15ce5;
	border-left: 7px solid #a15ce5;
	-webkit-transform: translateX(0) rotate(180deg);
	        transform: translateX(0) rotate(180deg);
}
.active .player__play-inner::after {
	border-right: 7px solid #a15ce5;
	border-left: 7px solid #a15ce5;
	-webkit-transform: translateX(0) rotate(180deg);
	        transform: translateX(0) rotate(180deg);
}

.disco{
    animation:blinki  2s infinite;
}

@keyframes blinki{
	0% {
		  background:  green;
	}
	50% {
		   background: white;
	}

	100% {
		   background: green;
	}
}


#player {
  background: brown;
  height: 160px;
  width: 250px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
 
          justify-content: center;
 
      flex-wrap: wrap;
  border-radius:...

JavaScript

$('.player__play-inner').on('click', function(){
   $('#player-play').toggleClass('active blink');
      $('#player-play').toggleClass('disco');
          $('#musikinhalt').animate({
       
     opacity: 1,
//display: "block",
  // height: "toggle"
  }, 3, function() {

    $('#player-play').delay('2222').toggleClass('wachsen') 
 $('#musikinhalt').css('display','block');
  
  });  
  })
  
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 bAleatorio = document.getElementById('aleatorio');
var list = document.getElementById('lista');
var bHamburger = document.getElementById('hamburger');
audio.src = songs[0];
mostrar();

for(i in songs){
  list.innerHTML +=...