JSFiddle - React, Tailwind, and code Playground

by Marc Malignan

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css">
<div class="player">
    <div class="vinyl"></div>
    <div class="cover">
        <div class="header">
            <div class="artist"><a href="#" target="_blank"></a></div>
            <div class="title"></div>
        </div>
        <div class="controls">
            <button class="transparent loop fi-loop"></button>
            <span>
                <button class="prev fi-previous"></button>
                <button class="play fi-play"></button>
                <button class="stop fi-stop"></button>
                <button class="next fi-next"></button>
            </span>
            <button class="transparent shuffle fi-shuffle"></button>
            <div class="progressbar">
                <div class="progress"></div>
            </div>
        </div>
    </div>
</div>

<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,100,700' rel='stylesheet' type='text/css'>

SCSS

$primary: #98c6c3; // daphne blue
$light: #f4f3ef; // artic white
$transparent: rgba(0,0,0,.8);

html, body { height: 100%; }
body{ 
    margin: 40px;
    background: radial-gradient($light, $primary);
    overflow: hidden;
}

.player {
    position: absolute;
    top:50%; left:50%;
    height:300px; width:300px;
    margin: -150px 0 0 -150px;
    font-family: 'Roboto', sans-serif;
    color: #fff;
    cursor: default;
    box-shadow: 0 3px 10px rgba(0,0,0,.4);
}

.vinyl {
    position: absolute;
    height: 98%; width: 98%;
    top: 1%; left: 51%;
    background: url('http://blog.masteringworld.com/wp-content/uploads/2013/06/record.jpg') center;
    background-size: 320px 320px;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
    pointer-events: none;
    transition: left .8s, -webkit-transform 1.5s;
}
.player.playing .vinyl {
    left: 1%;
    transition: all .8s;
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
}

.cover {
    position: absolute;
    height:100%; width:100%;
    background-color: black;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.header, .controls {
    background: $transparent;
    transition: all ease-out .3s;
}

.header {
    position: absolute;
    top: -40px;
    width:100%;
    padding: 5px;
    box-sizing: border-box;
    white-space: nowrap;
}
.header.show, 
.player:hover .header {
    top: 0px;
}

.artist, .title {
    line-height: 15px;
    text-align: center;
}
.artist {
    font-size: 13px;
    font-weight: 700;
}
.artist a {
    color: $light;
}
.title {
    font-size: 11px;
    font-weight: 300;
}

.controls {
    position: absolute;
    bottom: -40px;
    width: 100%;
    padding: 5px; 
    text-align: center;
    box-sizing: border-box;
}
.player:hover .controls {
    bottom: 0px;
}

.controls button {
    height: 30px; width:...

JavaScript

var music = [
    {
        title: 'Free Four',
        artist: 'Pink Floyd',
        artistWiki: 'http://en.wikipedia.org/wiki/Pink_floyd',
        album: 'Obscured by Clouds',
        cover: 'http://upload.wikimedia.org/wikipedia/en/e/ef/Pink_Floyd_-_Obscured_by_Clouds.jpg',
        length: '5000'
    },
    {
        title: 'Iron Tusk',
        artist: 'Mastodon',
        artistWiki: 'http://en.wikipedia.org/wiki/Mastodon_(band)',
        album: 'Leviathan',
        cover: 'http://upload.wikimedia.org/wikipedia/en/c/ca/Leviathan_special_edition_cover.jpg',
        length: '5000'
    },
    {
        title: 'I Want You (She\'s So Heavy)',
        artist: 'The Beatles',
        artistWiki: 'http://en.wikipedia.org/wiki/Beatles',
        album: 'Abbey Road',
        cover: 'http://upload.wikimedia.org/wikipedia/en/4/42/Beatles_-_Abbey_Road.jpg',
        length: '5000'
    }
]

var song_id = 0;
var song = music[0];
var titleInterval = null;
var timerStart = 0;
var timerPause = 0;

function init() {
    show();
    setTimeout(function() {
        showHeader();
        play();
    }, 500);
}

function show() {
    song = music[song_id];
    $('.artist a').html(song.artist).attr('href', song.artistWiki);
    $('.title').html(song.title);
    $('.cover').css('background-image', 'url('+song.cover+')');
}

function showHeader() {
    $('.header').addClass('show');
    setTimeout(function() { $('.header').removeClass('show'); }, 2000);
}

function togglePlay() {
    if($('.player').hasClass('playing') && !$('.player').hasClass('paused')) pause();
    else play();
}

function play() {
    show();
    $('.player').removeClass('paused').addClass('playing');
    $('.controls .play').removeClass('fi-play').addClass('fi-pause');
    startProgress();
}

function pause() {
    $('.player').addClass('paused');
    $('.controls .play').removeClass('fi-pause').addClass('fi-play');
    pauseProgress();
}

function stop() {
   ...