JSFiddle - React, Tailwind, and code Playground

HTML

<audio id="player" src="http://www.alexkatz.me/codepen/music/interlude.mp3"></audio>
<div id="audioplayer">
 <button id="plButton" class="play" onclick="document.getElementById('player').play()"></button> 
  <button id="psButton" class="pause" onclick="document.getElementById('player').pause()"></button> 
	<div id="timeline">    
		 <div id="playhead"></div>
	</div>
</div>

CSS

#audioplayer{
	width: 480px;
	height: 60px;
	margin: 50px auto auto auto;
border: solid;
}

#plButton,#psButton{
    height:60px; 
    width: 60px;
    border: none;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-position: center;
    float:left;
    outline:none;
}

.play, .play:hover, .pause:focus{background: url('http://www.alexkatz.me/codepen/images/play.png') ;}
.pause, .pause:hover, .play:focus{background: url('http://www.alexkatz.me/codepen/images/pause.png') ;}

#timeline{
	width: 400px;
	height: 20px;
	margin-top: 20px;
	float: left;
	border-radius: 15px;
	background: rgba(0,0,0,.3);
  
}
#playhead{
	width: 18px;
	height: 18px;
	border-radius: 50%;
	margin-top: 1px;
	background: rgba(0, 0, 0,1);

}