JSFiddle - React, Tailwind, and code Playground

HTML

<div id="uber-wrapper">
	<div id="wrapper">
	
		<div id="header">
			<div id="dummy"></div>
		</div>
					
		<div id="sticky_navigation">
            <ul class="cssmenu">
                <li>home</li>
                <li>band</li>
                <li class="playerwrapper">
                    <audio id="music" preload="true" >
                        <source src="http://www.rykewaltz.net/temp/pb.mp3">
		               	<source src="http://www.rykewaltz.net/temp/pb.ogg">
                    </audio>
                    <div id="audioplayer">
                        <button id="pButton" class="play" onclick="play()"></button>
                        <div id="timeline">
                            <div id="playhead"></div>
                        </div>
                    </div>
                </li>
            </ul>
		</div>
		
		<div id="band">
           <p><br><br>If browser width less than 500px, the click on the timeline moves the dot to the correct position.</p><br><p>If browser width more than 500px, the click on the timeline moves the dot with an offset to the clicked position. The offset equals to the free space between the left browser edge and the container div.<br><br><br><br></p>
		</div>

    </div>
</div>

CSS

@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Asap:400,700,400italic);

* {
	margin: 0px;
	padding: 0px;
}
html {
	height: 100%;
}
body {
	min-height: 100%;
	color: #dfdfdf;
	background-color: #07092f;
	font-size: 18px;
	line-height: 145%;
	font-family: 'Asap', sans-serif;
	letter-spacing: 0.2px;
}
p{
	font-size: 100%px;
	font-family: 'Asap', sans-serif;
}	
#uber-wrapper {
	position: relative;
	margin: auto;
	min-width: 400px;
	max-width: 500px;
}
#wrapper {
	position: relative;
	height: 100%;
    background-color: #883355;
}
#header {
	position: relative;
	width: 100%;
    background-color: #995522;
}
#dummy {
	padding-top: 47%;
}
#sticky_navigation {
	position: relative;
	width: 100%;
	overflow: hidden;
    z-index: 1000;
	text-align: justify;
    background-color: #113344;
}
.cssmenu {
	display: inline;	
}
ul.cssmenu {
	position: relative;
	width: 100%;
    list-style: none;
	text-align: center;
	}
ul.cssmenu li {
	display: inline-block;
	margin: 0 2%;
	}
	
/*********** audioplayer ****************/	

#player {
	position: relative;
	display: inline-block;	
	margin: 0 2%;
}

#audioplayer{
	width: 150px;
	height: 22px;
	margin: 0px auto auto auto;
}

#pButton{
    height: 24px; 
    width: 30px;
    border: none;
	margin-top: -1px;
    background-size: 65% 65%;
    background-repeat: no-repeat;
    background-position: center;
    float:left;
    outline:none;
	cursor: pointer;
}

.play{background: url("http://www.rykewaltz.net/temp/play.png") ;}
.pause{background: url("http://www.rykewaltz.net/temp/pause.png") ;}

#timeline{
	width: 113px;
	height: 6px;
	margin-top: 8px;
	float: left;
	border-radius: 10px;
	background: rgba(150, 150, 150, .3);
	cursor: pointer; 
}
#playhead{
	width: 8px;
	height: 8px;
	border-radius: 40%;
	margin-top: -1px;
	background: rgba(255, 0, 64, .75);
	cursor: pointer;
}

#band {
	position: relative;
	margin: -25px 10px 50px 10px;
    background-color: #337755;
}

JavaScript

var music = document.getElementById('music'); // id for audio element
var duration; // Duration of audio clip
var pButton = document.getElementById('pButton'); // play button

var playhead = document.getElementById('playhead'); // playhead

var timeline = document.getElementById('timeline'); // timeline
// timeline width adjusted for playhead
var timelineWidth = timeline.offsetWidth - playhead.offsetWidth;

// timeupdate event listener
music.addEventListener("timeupdate", timeUpdate, false);

//Makes timeline clickable
timeline.addEventListener("click", function(event) {
  moveplayhead(event);
  music.currentTime = duration * clickPercent(event);
}, false);

// returns click as decimal (.77) of the total timelineWidth
function clickPercent(e) {
  return (e.pageX - timeline.offsetLeft) / timelineWidth;
}

// Makes playhead draggable 
playhead.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);

// Boolean value so that mouse is moved on mouseUp only when the playhead is released 
var onplayhead = false;
// mouseDown EventListener
function mouseDown() {
    onplayhead = true;
    window.addEventListener('mousemove', moveplayhead, true);
    music.removeEventListener('timeupdate', timeUpdate, false);
  }
  // mouseUp EventListener
  // getting input from all mouse clicks
function mouseUp(e) {
    if (onplayhead == true) {
      moveplayhead(e);
      window.removeEventListener('mousemove', moveplayhead, true);
      // change current time
      music.currentTime = duration * clickPercent(e);
      music.addEventListener('timeupdate', timeUpdate, false);
    }
    onplayhead = false;
  }
  // mousemove EventListener
  // Moves playhead as user drags
function moveplayhead(e) {
  var newMargLeft = e.pageX - timeline.offsetLeft;
  if (newMargLeft >= 0 && newMargLeft <= timelineWidth) {
    playhead.style.marginLeft = newMargLeft + "px";
  }
  if (newMargLeft < 0) {
    playhead.style.marginLeft = "0px";
  }
  if...