JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid_12">
                <div class="grid_6 alpha"><!-- record, overflow:hidden -->
                <div id="player">
                <div id="recordbox">
                <div id="needle">
                </div>
                <div class="record2">
                </div>
                </div>
                <div class="player-box">
                <div id="title-player">Now playing:</div><br><strong><span class="player-station">Groove Salad</span></strong>
                <p class="nprecinfo">A nicely chilled plate of ambient/downtempo beats and grooves.</p>        
  </div>
                          <div class="bars-box">
                        <div class="bars">
                            <div class="bar-1"></div>
                            <div class="bar-2"></div>
                            <div class="bar-3"></div>
                            <div class="bar-4"></div>
                            <div class="bar-5"></div>
                            <div class="bar-6"></div>
                            <div class="bar-7"></div>
                            <div class="bar-8"></div>
                            <div class="bar-9"></div>
                            <div class="bar-10"></div>
                        </div>
                              <div id="lrvinyl">
                        </div>
                    </div>
                  </div>
                </div>
    
    <div class="grid_3">
        <div class="album">
        <div class="record">
        </div>
   
        <div class="recordsinfo"><p class="recordinfo">A nicely chilled plate of ambient/downtempo beats and grooves.</p>
        <a class="play" href="#" rel="http://benallison.com/cms/wp-content/uploads/2011/12/CD-Cover-Composite220.jpg">Play</a>
        </div>
        <div class="salad"><!-- sleeve -->
        <h3>Groove Salad</h3>
        </div>
        </div>
    </div>
                
    <div class="grid_3 omega">
        <div class="album">
        <div...

CSS

.record2{
    background-image: url(http://benlevywebdesign.com/somafm/images/SomaFMrecord2.png);
    background-repeat:no-repeat;
    height: 220px;
    width: 220px;
    position:absolute;
    z-index:0;
    -webkit-animation-play-state:paused;
    -webkit-animation-name: motion;
    -webkit-animation-duration:2s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:normal;
    -moz-animation-play-state:paused;
    -moz-animation-name: motion;
    -moz-animation-duration:2s;
    -moz-animation-timing-function:linear;
    -moz-animation-iteration-count:infinite;
    -moz-animation-direction:normal;
    top:-4px;
    left:-2px;
}

@-webkit-keyframes motion {
    0% {
       -webkit-transform: rotate(0deg);
    }
    100% {
       -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes motion {
    0% {
       -moz-transform: rotate(0deg);
    }
    100% {
       -moz-transform: rotate(360deg);
    }
}


.album {
    position:relative;
    height:220px;
    width:220px;
    overflow:hidden;
    margin-bottom: 20px;
}

.record{
    background-image: url(http://benlevywebdesign.com/somafm/images/SomaFMrecord.png);
    background-repeat:no-repeat;
    height: 220px;
    width: 220px;
    position: absolute;
    z-index:0;
}

.album:hover .record{
    background-image: url(http://benlevywebdesign.com/somafm/images/SomaFMrecord.png);
    background-repeat:no-repeat;
    height: 220px;
    width: 220px;
    position: absolute;
    z-index:0;
    -webkit-animation-name: motion;
    -webkit-animation-duration:8s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:normal;
    -moz-animation-name: motion;
    -moz-animation-duration:8s;
    -moz-animation-timing-function:linear;
    -moz-animation-iteration-count:infinite;
    -moz-animation-direction:normal;
    top:0px;
}

@-webkit-keyframes motion {
    0% {
      ...

JavaScript

$(function(){
    var station = $('.player-station'),
        record = $('.record2:first'),
        playBtns = $('.play'),
        info = $('.nprecinfo');
    var isPlaying = false;
    
    playBtns.click(function()
    {
        var btn = $(this);
        if(btn.text() == 'STOP')
        {
            btn.text('PLAY');
            record.css({'-webkit-animation-play-state': 'paused',
                        '-moz-animation-play-state': 'paused'});
            
            $('#needle').show().animate({"left": "-=120px"}, "slow");
            isPlaying = false;     
         
            return;
        };
        
        playBtns.text('PLAY');
        var album = btn.closest('.album');
        station.text(album.find('h3').text());
        info.text(album.find('.recordinfo').text());
        record.css({'-webkit-animation-play-state': 'running',
                    '-moz-animation-play-state': 'running'});
        if (isPlaying == false)
        {
        $('#needle').show().animate({"left": "+=120px"}, "slow");
        isPlaying = true;
        }
        
         $('#lrvinyl').css("background-image","url("+btn.attr('rel')+")");
         $('#lrvinyl').hide().fadeIn();
        
        btn.text('STOP');
    });
});