JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.jplayer.org/latest/js/jplayer.playlist.min.js"></script>
<script src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/add-on/jplayer.playlist.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.min.js"></script>
<div id="jp_container_1">
    <div id="jquery_jplayer_1" class="jp-jplayer"></div>
    <div class="jp-gui ui-widget ui-widget-content ui-corner-all">
        <ul>
            <li class="jp-play ui-state-default ui-corner-all"><a href="javascript:;" class="jp-play ui-icon ui-icon-play" tabindex="1"
                title="play">play</a>
            </li>
            <li class="jp-pause ui-state-default ui-corner-all"><a href="javascript:;" class="jp-pause ui-icon ui-icon-pause" tabindex="1"
                title="pause">pause</a>
            </li>
            <li class="jp-stop ui-state-default ui-corner-all"><a href="javascript:;" class="jp-stop ui-icon ui-icon-stop" tabindex="1"
                title="stop">stop</a>
            </li>
            <li class="jp-repeat ui-state-default ui-corner-all"><a href="javascript:;" class="jp-repeat ui-icon ui-icon-refresh" tabindex="1"
                title="repeat">repeat</a>
            </li>
            <li class="jp-repeat-off ui-state-default ui-state-active ui-corner-all"><a href="javascript:;" class="jp-repeat-off ui-icon ui-icon-refresh" tabindex="1"
                title="repeat off">repeat off</a>
            </li>
            <li class="jp-mute ui-state-default ui-corner-all"><a href="javascript:;" class="jp-mute ui-icon ui-icon-volume-off" tabindex="1"
                title="mute">mute</a>
            </li>
            <li class="jp-unmute ui-state-default ui-state-active ui-corner-all"><a href="javascript:;" class="jp-unmute ui-icon ui-icon-volume-off" tabindex="1"
                title="unmute">unmute</a>
            </li>
            <li...

JavaScript

var playlist =
		[{
			title:"Tempered Song",
			mp3:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3",
			oga:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.ogg",
		},
		{
			title:"Your Face",
			mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
			oga:"http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg"
		}];
		
	var myPlayer = $("#jquery_jplayer_1");
	var 
	jpAncestor = "#jp_container_1",
	myPlayerData,
	fixFlash_mp4, // Flag: The m4a and m4v Flash player gives some old currentTime values when changed.
	fixFlash_mp4_id, // Timeout ID used with fixFlash_mp4
	ignore_timeupdate, // Flag used with fixFlash_mp4
	myControl;

	// Instantiate the jPlayer playlist object, using the Soundcloud playlist array   
	new jPlayerPlaylist({
		jPlayer: myPlayer,
		cssSelectorAncestor: jpAncestor
	}, 
	playlist
	,
	{
		playlistOptions: {
			autoPlay: false,
			loopOnPrevious: true // For restarting the playlist after the last track
		},
		ready: function (event) {
			// Hide the volume slider on mobile browsers. ie., They have no effect.
			if (event.jPlayer.status.noVolume) {
				// Add a class and then CSS rules deal with it.
				$(".jp-gui").addClass("jp-no-volume");
			}
			// Determine if Flash is being used and the mp4 media type is supplied. BTW, Supplying both mp3 and mp4 is pointless.
			fixFlash_mp4 = event.jPlayer.flash.used && /m4a|m4v/.test(event.jPlayer.options.supplied);
		},
		timeupdate: function (event) {
			if (!ignore_timeupdate) {
				$(jpAncestor + " .jp-progress-slider").slider("value", event.jPlayer.status.currentPercentAbsolute);
			}
		},
		volumechange: function (event) {
			if (event.jPlayer.options.muted) {
				$(jpAncestor + " .jp-volume-slider").slider("value", 0);
			} else {
				$(jpAncestor + " .jp-volume-slider").slider("value", event.jPlayer.options.volume);
			}
		},
		loop: true, // Also for restarting the playlist after the last track
		swfPath: "../js",
		supplied: "mp3, m4a, oga",
		smoothPlayBar:...