JSFiddle - React, Tailwind, and code Playground

HTML

<body id="home">
<main class="main options">
		<section>
			<img class="gifplayer" src="http://daleideias.com.br/clientes/walmart/Gif/gif.png" />
		</section>
<hr/>
<script>
			$(document).ready( function(){
				$('.gifplayer').gifplayer();
			});
		</script>
    </main></body>

CSS

body { background: #e8e8e8; }
.main { margin: 0 auto; width:100%; max-width: 960px; }

ins.play-gif{
	position: absolute;
	font-family: Arial, sans serif;
	width: 50px;
	height: 50px;
	line-height: 52px;
	text-align: center;
	background: #222;
	font-size: 18px;
	color: #fff;
	border-radius: 50%;
	opacity: .9;
	border: 4px solid #fff;
	cursor:pointer;
	text-decoration: none;
}

ins.play-gif:hover{
	opacity:.5;
}

.gifplayer-wrapper{
	position:relative;
	display: inline-block;
}

.spinner {
	height:50px;
	width:50px;
	margin:0px auto;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-25px;
	margin-left:-25px;
	-webkit-animation: rotation .6s infinite linear;
	-moz-animation: rotation .6s infinite linear;
	-o-animation: rotation .6s infinite linear;
	animation: rotation .6s infinite linear;
	border-left:6px solid rgba(256,256,256,.15);
	border-right:6px solid rgba(256,256,256,.15);
	border-bottom:6px solid rgba(256,256,256,.15);
	border-top:6px solid rgba(256,256,256,.8);
	border-radius:100%;
}

@-webkit-keyframes rotation {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(359deg);}
}

@-moz-keyframes rotation {
	from {-moz-transform: rotate(0deg);}
	to {-moz-transform: rotate(359deg);}
}

@-o-keyframes rotation {
	from {-o-transform: rotate(0deg);}
	to {-o-transform: rotate(359deg);}
}

@keyframes rotation {
	from {transform: rotate(0deg);}
	to {transform: rotate(359deg);}
}

JavaScript

(function($) {

	function GifPlayer(preview, options){
		this.previewElement = preview;
		this.options = options;
		this.animationLoaded = false;
	}

	GifPlayer.scopes = new Array();

	GifPlayer.prototype = {

		supportedFormats: ['gif', 'jpeg', 'jpg', 'png'],

		activate: function(){
			var self = this;
			if(this.previewElement.width() === 0){
				setTimeout(function(){
					self.activate();
				}, 100);
			}else{
				self.mode = self.getOption('mode');
				self.wrap();
				self.addSpinner();
				self.addControl();
				self.addEvents();
			}
		},

		wrap: function(){
			this.previewElement.addClass('gifplayer-ready');
			this.wrapper = this.previewElement.wrap("<div class='gifplayer-wrapper'></div>").parent();
			this.wrapper.css('width', this.previewElement.width());
			this.wrapper.css('height', this.previewElement.height());
			this.previewElement.css('cursor','pointer');
		},

		addSpinner: function(){
			this.spinnerElement = $("<div class = 'spinner'></div>");
			this.wrapper.append(this.spinnerElement);
			this.spinnerElement.hide();
		},

		getOption: function(option){
			var dataOption = this.previewElement.data(option.toLowerCase());
			if(dataOption != undefined && dataOption != ''){
				return dataOption;
			}else{
				return this.options[option];
			}
		},

		addControl: function(){
			var label = this.getOption('label');
			this.playElement = $("<ins class='play-gif'>" + label + "</ins>");
			this.wrapper.append(this.playElement);
			this.playElement.css('top', this.previewElement.height()/2 - this.playElement.height()/2);
			this.playElement.css('left', this.previewElement.width()/2 - this.playElement.width()/2);
		},

		addEvents: function(){
			var gp = this;
			var playOn = this.getOption('playOn');

			switch(playOn){
				case 'click':
					gp.playElement.on( 'click', function(e){
						gp.previewElement.trigger('click');
					});
					gp.previewElement.on( 'click',...