JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gifcenter">
	<div class="gifcont">
		<img class="animated">
		<img class="still" src="https://media.githubusercontent.com/media/zompi2/GifPlayer/master/image.png">
		<div class="spinner">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
        </div>
		<div class="play">
            <div class="play_button"></div>
        </div>
   </div>
</div>

CSS

/* Class used to hide images */
.hidden {
	display: none!important;
}

/* With this class we can centre the gif player */
.gifcenter {
	width: 960px;
	margin: auto;
	text-align: center;
}

/* With relative position the images will overlay themselves 
 * and there will be no problem if more than one gif player is  
 * displayed on the page */
.gifcont {
	position: relative;
	display: inline-block;
	background-color: #CCC;
}


/* =============================== */
/* ======= The Play Button ======= */
/* =============================== */

/* The round button with white background and black
 * border. It is positioned in the centre of the gif player
 * and has fixed size. The border transits to the lesser alpha
 * when hover. */
.play {
    border: 4px solid black;
	border-radius: 100%;
	
	position: absolute;
	top: 50%;
	left: 50%;
    width: 40px;
    height: 40px;
	margin-top: -22px;
	margin-left: -22px;
	
    transition: all 0.5s ease;
	
    cursor: pointer;
	background-color: white;
}

/* The "arrow" with fixed size on the centre of 
 * the round button. It transits to the lesser alpha
 * when hover. */
.play_button {
    position:relative;
    top: 10px;
    left: 40%;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid black;
} 

/* Setting lesser alpha on play round button when hover */
.play.hover {
    border-color: rgba(0,0,0,0.5);
}

/* Setting lesser alpha on black triangle button when hover */
.play.hover .play_button{
    border-left: 10px solid rgba(0,0,0,0.5);
}


/* =============================== */
/* ========= The Spinner ========= */
/* =============================== */

/* Handles the fancy spinner animation with fixed size
 * and centred on the gifplayer */
.spinner { 
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -20px;
	margin-left: -20px;
	width: 40px;
	height: 40px;
}

/* Spinner is made from two bounding spheres. Here are
 * set two of...

JavaScript

// This will hook all gifcont blocks to the gifPlayer function
$(document).ready( function(){
    $('.gifcont').each(function() {
        var self = $(this);
        this.gp = new gifPlayer(self);
    });
});

// The whole gifplayer mechanisms are here
function gifPlayer(cont) {
	//Set the first state		
	var state = 'freeze';
			
	//Get pointers to all needed blocks
	var still 		= cont.find('.still');
	var animated 	= cont.find('.animated');
	var spinner 	= cont.find('.spinner');
	var play 		= cont.find('.play');	
	
	//Get urls of still and animated graphics
	var stillsrc = still.attr('src');
	var animatedsrc = stillsrc.replace('.png', '_anim.gif');
	
	//Hide animated gif and spinner first
	animated.addClass('hidden');
	spinner.addClass('hidden');
	
	//Define function that runs when loading has finished
	//Hide still, and spinner, show animated
	var onFinishedLoading = function() {
		still.addClass('hidden');
		animated.removeClass('hidden');
		spinner.addClass('hidden');
		
		state = 'playing';
	}
	
	//Define function that runs when loading has started
	//Set animated src show spinner and hide play button
	var onStartLoading = function() {
		animated.attr('src', animatedsrc);	
		spinner.removeClass('hidden');
		play.addClass('hidden');
		
		state = 'loading';
	}
	
	//Define function that runs when gif has stopped
	//Show still, hide gif and remove src attribute, show play button
	var onStop = function() {
		still.removeClass('hidden');
		animated.removeAttr('src').addClass('hidden');
		play.removeClass('hidden');
	
		state = 'stopped';
	}
	
	//When still image finished downloading 
	//allow to download gif image (unfreeze state)
	//Also show play button and set size of container
	still.load(function() {
		state = 'unloaded';
		play.removeClass('hidden');		
		cont.width(this.width).height(this.height);
	});
	
	//Play play_button animation when hoving over the div
	cont.hover(function() {
		play.addClass('hover');
	}, function()...