JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>

<script src="jquery-1.7.1.min.js" type="text/javascript"></script>

</head>
<body>
<section class="music_player">
    <div class="inner">
        <div class="player">
            
            <img src="http://dl.dropbox.com/u/2321732/images/disc.png" alt="record spinning" class="spin">
            <img class="loader" src="http://dl.dropbox.com/u/2321732/images/loading.gif" alt="loading..." />
            
            <audio id="player" preload="auto">
                <source src="http://dl.dropbox.com/u/2321732/musics/music.mp3" type="audio/mp3" id="theMp3File">
                <source src="http://dl.dropbox.com/u/2321732/musics/music.ogg" type="audio/ogg" id="theOggFile">
            </audio>
            
            <div class="controls">
                <button onclick="document.getElementById('player').play()" class="play">
                <img src="http://dl.dropbox.com/u/2321732/images/play.svg" alt="play">
                </button>
                
                <button onclick="document.getElementById('player').pause()" class="pause">
                <img src="http://dl.dropbox.com/u/2321732/images/pause.svg" alt="pause">
                </button>    
            </div><!-- close controls -->
        
        </div><!-- close player -->
        
    </div><!-- close inner -->
</section>
 
<script type="text/javascript">

$('#theMp3File').load(function(){
  $('.loader').hide();
});


</script>
</body>
</html>

CSS

html, body, div, a, p, img, ul, li, footer, header, section, h1, h2, h3, h4, span, small, audio, button, figure {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
footer, header, section, audio { 
    display:block;
}



.inner {
    width:96%;
    max-width:940px;
    margin:0 auto;
    overflow:auto;
    }
    
header {
    width:100%;
    }

section {
   width:100%;
   background:#fdfbdd;
   padding:65px 0 20px 0;
   color:#eb5966;
   }
.player {
   width:23.4%;
   float:left;
   padding:0 10% 0 0;
   }
.spin {
   width:100%;
   height:auto;
   -webkit-animation-name: Rotation;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;
   -webkit-animation-duration: 5s;
  }

@-webkit-keyframes Rotation {
from {
  -webkit-transform: rotate(0deg);
  }

to {
  -webkit-transform: rotate(360deg);
  }
    }
    
    
audio {
   display:none;
   }
.controls {
   width:100%;
   margin:35px 0 0 0;
   }

button {
   width:27.27%;
   cursor:pointer;
   display:block;
   float:left;
   clear:none;
   }
button:hover {
   opacity:0.6;
   }
button span {
    display:none;
    }
button img {
    width:100%;
    height:auto;
    }
.play {
    margin:0 9.1% 20px 18.2%;
    }
.loader {
    width: 30px;
    height: 30px;
    background: transparent ;
    position: absolute;
    top:1px;
    left:1px;
}