JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://osvaldas.info/examples/audio-player-responsive-and-touch-friendly/audioplayer.js"></script>
<script src="http://simplepodcaster.com/wp-includes/js/jquery/jquery.js"></script>
<audio controls class="sppaudioplayer" id="spp-audio-player"><source src="http://www.blogtalkradio.com/girlsinheels/2016/04/12/one-girl-two-boots.mp3"></source></audio>

CSS

html
		{
			height: 100%;
		}
		body
		{
			min-height: 100%;
			font-family: 'Advent Pro', sans-serif;
			font-weight: 500;
			background-color: #c3d5d3;
			padding: 3.75em 1.875em; /* 60 30 */
		}
		strong
		{
			font-weight: 700;
		}
		#wrapper
		{
			width: 30em; /* 480 */
			height: 8.75em; /* 140 */
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -4.375em 0 0 -15em; /* 70 240 */
		}
		h1
		{
			font-family: 'Advent Pro', sans-serif;
			font-size: 1.688em; /* 27 */
			font-weight: 500;
			text-align: center;
			margin-bottom: 0.741em; /* 20 */
		}
			h1,
			h1 a,
			#copyright,
			#copyright a
			{
				color: #fff;
				text-shadow: 1px 1px 0 rgba( 0, 0, 0, .1 );
			}
			h1 a,
			#copyright a
			{
				-webkit-transition: text-shadow .25s ease;
				-moz-transition: text-shadow .25s ease;
				-ms-transition: text-shadow .25s ease;
				-o-transition: text-shadow .25s ease;
				transition: text-shadow .25s ease;
			}
				h1 a:hover,
				h1 a:focus,
				#copyright a:hover,
				#copyright a:focus
				{
					color: #fff;
					text-shadow: 1px 1px 0 rgba( 0, 0, 0, .3 );
				}
			h1 em
			{
				font-family: Baskerville, serif;
			}

		#copyright
		{
			font-size: 0.875em; /* 14 */
			text-align: center;
			margin-top: 1.429em; /* 20 */
		}
			#copyright a
			{
				font-weight: 700;
			}


		/*
			PLAYER
		*/

		.audioplayer
		{
			height: 2.5em; /* 40 */
			color: #fff;
			text-shadow: 1px 1px 0 #000;
			border: 1px solid #222;
			position: relative;
			z-index: 1;
			background: #333;
		}


			/* mini mode (fallback) */

			.audioplayer-mini
			{
				width: 2.5em; /* 40 */
				margin: 0 auto;
			}


			/* player elements: play/pause and volume buttons, played/duration timers, progress bar of loaded/played */

			.audioplayer > div
			{
				position: absolute;
			}


			/* play/pause button */

			.audioplayer-playpause
			{
				width: 2.5em; /* 40 */
				height: 100%;
				text-align: left;
				text-indent: -9999px;
				cursor: pointer;
				z-index:...

JavaScript

$( function()
    {
        $( 'audio' ).audioPlayer();
        $('.audioplayer-playpause').trigger('click');
    });