JSFiddle - React, Tailwind, and code Playground

by HappyCougar

HTML

<script src="http://daft-punk.ru/go/player_engine/initaudioplayer-1.js"></script>
<link rel="stylesheet" href="http://daft-punk.ru/go/player_engine/initaudioplayer-1.css">
<script src="http://daft-punk.ru/go/player_engine/amazingaudioplayer.js"></script>
<div class="album_holder_gray">
<div class="album">
    <h2>Discovery</h2>
    <div class="album_cover">
        <img src="http://daft-punk.ru/go/images/album/Daft_Punk_Discovery_Cover.jpg" alt="Daft Punk альбом Discovery" title="Daft Punk альбом Discovery"/>
    </div>
    <div class="album_description"><p>Discovery — второй альбом французского электронного дуэта Daft Punk, выпущенный в марте 2001 года. Ознаменовал собой переход звучания от Чикаго-хауса, которым коллектив прославился до этого, к диско, ню-диско и хаусу, вдохновлённому синтипопом</p></div>
    <div class="album_button_holder"><div class="album_open"><p>Слушать альбом</p></div></div>
    <div id="amazingaudioplayer-1" class="player">
        <ul class="amazingaudioplayer-audios" style="display:none;">
            <li data-artist="" data-title="One More Time" data-album="" data-info="" data-image="" data-duration="321">
                <div class="amazingaudioplayer-source" data-src="http://daft-punk.ru/go/audio/discovery/01 - One More Time.mp3" data-type="audio/mpeg" />
            </li>
			<li data-artist="" data-title="Aerodynamic" data-album="" data-info="" data-image="" data-duration="208">
				<div class="amazingaudioplayer-source" data-src="http://daft-punk.ru/go/audio/discovery/02 - Aerodynamic.mp3" data-type="audio/mpeg" />
			</li>
			<li data-artist="" data-title="Digital Love" data-album="" data-info="" data-image="" data-duration="298">
				<div class="amazingaudioplayer-source" data-src="http://daft-punk.ru/go/audio/discovery/03 - Digital Love.mp3" data-type="audio/mpeg" />
			</li>
			<li data-artist="" data-title="Harder, Better, Faster, Stronger" data-album="" data-info="" data-image="" data-duration="224">
				<div...

CSS

* {
		margin:0px;
		padding:0px;
}
    body {
		background:#FFF;
		width:100%;
		height:100%;
    font-family: Arial;
    word-wrap: break-word;
	}
	@font-face {
	  font-family: 'Open Sans';
	  font-style: normal;
	  font-weight: 400;
	  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/RjgO7rYTmqiVp7vzi-Q5UT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
	}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  src: local('Comfortaa'), local('Comfortaa-Regular'), url(http://themes.googleusercontent.com/static/fonts/comfortaa/v4/qLBu5CQmSMt1H43OiWJ77T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
.album_holder_gray {
    background:#F5F5F5;
    width:100%;
}
.album {
    width:1000px;
    margin:0 auto;
}
.album_description {
    width: 730px;
    padding: 25px 25px;
    background: #FFF;
    margin: 0px 0px 40px 30px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #E6E6E6;
    display: inline-block;
    vertical-align: top;
}
h2 {
    text-align: center;
    font-family: 'Comfortaa';
    margin-bottom: 5px;
    text-transform: uppercase;
    padding-top: 15px;
    font-size: 26px;
    margin-bottom: 30px;
}
.album_open {
    display: table;
    background: #FFA70A;
    margin: 0 auto;
    padding: 10px 20px;
    text-transform: uppercase;
    font-size: 15px;
    background: #EB592A;
    background: -moz-linear-gradient(top,#eb592a 0%,#f8693b 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#EB592A),color-stop(100%,#F8693B));
    background: -webkit-linear-gradient(top,#EB592A 0%,#F8693B 100%);
    background-image: linear-gradient(#EB592A 0%, #F8693B 100%);
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin:...

JavaScript

$(".album_open").click(function () {
    $(this).parent().parent().find(".player").show('fade',1000);
    $(this).parent().parent().find(".album_close").show('fade',1000);    
    $(this).hide('fade',500).parent().animate({height:0},{duration: 500, queue: false });    
});
$(".amazingaudioplayer-track-item, .amazingaudioplayer-track-item-hover").click(function () {
	$(".amazingaudioplayer-track-item-hover").removeClass("amazingaudioplayer-track-item-hover");
    var track_parent = $(this).parents(".player").attr('id');
    $(".player").each(function () {
        if($(this).attr('id') !== track_parent) {
            $(this).find(".amazingaudioplayer-pause").click();
            $(this).find(".amazingaudioplayer-play").css("display","block");
        }
    });
});
$(".album_close").click(function () {
    $(this).parent().find(".player").hide("blind" ,1000);
    $(this).parent().find(".album_close").hide('fade',1000);
    $(this).parent().find(".album_open").show('fade',500).parent().animate({height:37},{duration: 500, queue: false });
});