JSFiddle - React, Tailwind, and code Playground

by basti1012

HTML

<div id="musikplayer">
 
  <div id="player-play"  class="player__play">
  <div class="player__play-inner"></div> 
	</div></div>

CSS

#musikplayer{
position:absolute;
   border:2px solid black;
   width:200px;
   height:70px;
   background:red;
   color:blue;
 left:200px;
 top:200px;

 }

 


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

JavaScript

$('#player-play').on('click', function(){
   $(this).toggleClass('active blink');
      $(this).toggleClass('disco');
       
  })
  

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

//animation: 1600ms pulsate infinite alternate ease-in-out;