JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://learnfiles.com/wp-content/themes/learnfile/include/css/style.css">
<div class="player row" data-dwplayer="true" data-mp3="http://dornaweb.ir/love-club.mp3" data-loop="true">
				<div class="player-elements row">
					<span class="col time ltr">
						<strong class="time-passed">00:00</strong> / 
						<span class="time-total">03:23</span>
					</span>
					
					<span class="volume volume-3 volume-icon col"></span>
					
					<div class="player-progressbar col ltr">
						<span class="bar row"><em class="fluid go-left" style="width:0%;"></em></span>
					</div>
					<!-- .player-progressbar -->
					
					<span class="play play-pause col"></span>
				</div>
				<!-- .player-elements -->
			</div>

<div class="player row" data-dwplayer="true" data-mp3="http://dornaweb.ir/love-club.mp3" data-loop="true">
				<div class="player-elements row">
					<span class="col time ltr">
						<strong class="time-passed">00:00</strong> / 
						<span class="time-total">03:23</span>
					</span>
					
					<span class="volume volume-3 volume-icon col"></span>
					
					<div class="player-progressbar col ltr">
						<span class="bar row"><em class="fluid go-left" style="width:0%;"></em></span>
					</div>
					<!-- .player-progressbar -->
					
					<span class="play play-pause col"></span>
				</div>
				<!-- .player-elements -->
			</div>

CSS

.body {
    direction:ltr !important;
    text-align:left;
}

.col {
    float:left !important;
}

.player {
    float:left !important;
}

JavaScript

/**
 * Html 5 Audio Player
 * Simple audio player for LearnFiles by iVahid.com
 *
 * @author Am!n - <info@ivahid.com>
 * @package Wordpress
 * @subpackage Learnfiles Wordpress Theme
 * @version 2.0
*/
var audios = new Array();

$("[data-dwplayer=true]").each(function(){
	var player = $(this);
	var audio = new Audio();
	audio.preload = 'metadata';
	
	/* data */
	var source = player.data('mp3') ? player.data('mp3') : player.data('ogg');
	var auto   = player.data('autoplay') ? true : false;
	var loop   = player.data('loop') ? true : false;
	
	/* time progress */
	var time_progress = player.find(".time-total");
	
	/* buttons */
	var volumeButton = player.find(".volume");
	var pauseButton  = player.find(".pause");
	var playButton   = player.find(".play");
	var playToggle 	 = true;
	
	/* set source */
	audio.src = source;
    
    audios.push(audio);
	
	/**
	 * Format Seconds into DD:HH:MM:SS
	*/
	function formatSeconds( s ) {
		var fm = [
			Math.floor(s / 60 / 60 / 24), // DAYS
			Math.floor(s / 60 / 60) % 24, // HOURS
			Math.floor(s / 60) % 60, // MINUTES
			Math.floor(s % 60) // SECONDS
		];
		fm = $.map(fm, function(v, i) { return ((v < 10) ? '0' : '') + v; });
		
		return fm;
	}
	
	/* format into MM:SS */
	function formatAudioTime( s ) {
		var time = formatSeconds( s );
		return time[2]+":"+time[3];
	}
	
	/* main stuff */
	audio.addEventListener("canplaythrough", function () {
		/* autoplay */
		if( auto ) {
			audio.play();
			playButton.removeClass("play").addClass("pause");
		}
		
		/**
		 * Volume Handle
		*/
		volumeButton.click(function() {
			if( $(this).hasClass("volume-3") ) {
				audio.muted = true;
				$(this).removeClass("volume-3")
				$(this).addClass("volume-0")
			}
			
			else if( $(this).hasClass("volume-0") ) {
				audio.muted = false;
				audio.volume = 0.33;
				$(this).removeClass("volume-0")
				$(this).addClass("volume-1")
			}
			
			else if( $(this).hasClass("volume-1") ) {
				audio.muted = false;
				audio.volume =...