JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jplayer.org/latest/js/jquery.jplayer.min.js"></script>
<div id="jquery_jplayer"></div>

		<!-- Using the cssSelectorAncestor option with the default cssSelector class names to enable control association of standard functions using built in features -->

		<div id="jp_container">
            <a href="http://www.jplayer.org/audio/mp3/Miaow-05-The-separation.mp3" class="track">The Separation</a><br />
            <a href="http://www.jplayer.org/audio/mp3/Miaow-04-Lismore.mp3" class="track">Lismore</a><br />
            <a href="http://www.jplayer.org/audio/mp3/Miaow-10-Thin-ice.mp3" class="track">Thin Ice</a><br />
            <a href="http://allmuz.org/audio/aHR0cDovL2NzMS0zNnY0LnZrLm1lL3AyMC81MTdhYjg4NDg4MDk2MC5tcDM_ZXh0cmE9VkJaV3h1Y0pYSGtxQzNRaGdSel9NQWJKLXBKc2h4RE9YNjZsOTNMNkY1UndmNHhMUFdLanZjMFlsdlhyaUFZU1pWYzloR1ZzTGpsOUFCeVA3dFZfbEpBT3llQjU/play" class="track">Лекция Бориса Гребенщикова о Буддизме</a><br />

            
            
            
            <div class="demo-container">
			<p>
				<span class="play-state"></span>
                <span class="track-name">nothing</span>
				<span class="extra-play-info"></span><br />
				<span class="jp-current-time"></span>
                Из <span class="jp-duration"></span>
                <a class="jp-play" href="#">Играть</a></li>
                <a class="jp-pause" href="#">Пауза</a>
                <a class="jp-stop" href="#">Стоп</a>
				<!--<li><a class="jp-play" href="#">Play</a></li>-->
				
			</p>
			<ul>
				<li>Громкость:</li>
				<li><a class="jp-mute" href="#">Mute</a></li>
				<li><a class="jp-unmute" href="#">Unmute</a></li>
                <li> <a class="jp-volume-bar" href="#">&lt;||||||||||||&gt;</a></li>
				<li><a class="jp-volume-max" href="#">Max</a></li>
			</ul>
		</div>
</div>

CSS

.demo-container {
    display:none;
    position:fixed;
    left:50%;
    width:320px;
    margin-left:-160px;
    top:50px;
    background:white;
	border: 1px solid #009BE3;
	padding:0 10px;
	font-family: "Myriad Pro Regular","Trebuchet MS";
}

.demo-container a, .demo-container a:link, .demo-container a:visited, .demo-container a:hover, .demo-container a:focus, .demo-container a:active {
	color: #009BE3;
}

.demo-container ul {
	list-style-type:none;
	padding:0;
	margin:1em 0;
	width:100%;
	overflow:hidden;
}

.demo-container ul span {
	color: #A0A600;
}

.demo-container li {
	float:left;
	margin-right:1em;
}

.demo-container p span.track-name {
	color: #CC0090;

JavaScript

$(document).ready(function(){

	// Local copy of jQuery selectors, for performance.
	var	my_jPlayer = $("#jquery_jplayer"),
		my_trackName = $("#jp_container .track-name"),
		my_playState = $("#jp_container .play-state"),
		my_extraPlayInfo = $("#jp_container .extra-play-info");

	// Some options
	var	opt_play_first = false, // If true, will attempt to auto-play the default track on page loads. No effect on mobile devices, like iOS.
		opt_auto_play = true, // If true, when a track is selected, it will auto-play.
        opt_text_playing = "Воспроизведение :", // Text when playing
		opt_text_selected = ""; // Text when not playing

	// A flag to capture the first track
	var first_track = true;

	// Change the time format
	$.jPlayer.timeFormat.padMin = false;
	$.jPlayer.timeFormat.padSec = false;

	// Initialize the play state text
	my_playState.text(opt_text_selected);

	// Instance jPlayer
	my_jPlayer.jPlayer({
		ready: function () {
			$("#jp_container .track-default").click();
		},
		timeupdate: function(event) {
			my_extraPlayInfo.text(parseInt(event.jPlayer.status.currentPercentAbsolute, 10) + "%");
		},
		play: function(event) {
			my_playState.text(opt_text_playing);
		},
		pause: function(event) {
			my_playState.text(opt_text_selected);
		},
		ended: function(event) {
			my_playState.text(opt_text_selected);
		},
		swfPath: "js",
		cssSelectorAncestor: "#jp_container",
		supplied: "mp3",
		wmode: "window"
	});

	// Create click handlers for the different tracks
	$("#jp_container .track").click(function(e) {
		my_trackName.text($(this).text());
		my_jPlayer.jPlayer("setMedia", {
			mp3: $(this).attr("href")
		});
		if((opt_play_first && first_track) || (opt_auto_play && !first_track)) {
			my_jPlayer.jPlayer("play");
		}
		first_track = false;
		$(this).blur();
		return false;
	});
    $(".track").click(function(){
    $(".demo-container").css("display", "block");
});
    $(".jp-stop").click(function(){
    $(".demo-container").css("display",...