JSFiddle - React, Tailwind, and code Playground

JavaScript

(function($) {
	$.id = {version: '3.1.5'};
	
	$.fn.id = function(pp_settings) {
		pp_settings = jQuery.extend({
			hook: 'rel',
			animation_speed: 'fast', 
			ajaxcallback: function() {},
			slideshow: false, 
			autoplay_slideshow: false, 
			opacity: 0.80, 
			show_title: true,
			allow_resize: false,
			allow_expand: true, 
			default_width: 800,
			default_height: 450,
			counter_separator_label: '/', 
			theme: 'pp_default', 
			horizontal_padding: 20,
			hideflash: false,
			wmode: 'opaque',
			autoplay: true, 
			modal: false, 
			deeplinking: true, 
			overlay_gallery: false, 
			overlay_gallery_max: 30, 
			keyboard_shortcuts: true, 
			changepicturecallback: function(){},
			callback: function(){},
			ie6_fallback: true,
			markup: '<div class="pp_pic_holder"> \
						<div class="ppt">&nbsp;</div> \
						<div class="pp_top"> \
							<div class="pp_left"></div> \
							<div class="pp_middle"></div> \
							<div class="pp_right"></div> \
						</div> \
						<div class="pp_content_container"> \
							<div class="pp_left"> \
							<div class="pp_right"> \
								<div class="pp_content"> \
									<div class="pp_loaderIcon"></div> \
									<div class="pp_fade"> \
										<a href="#" class="pp_expand" title="Expand the image">Expand</a> \
										<div class="pp_hoverContainer"> \
											<a class="pp_next" href="#">Дальше</a> \
											<a class="pp_previous" href="#">Назад</a> \
										</div> \
										<div id="pp_full_res"></div> \
										<div class="pp_details"> \
											<p class="pp_description"></p> \
											<div class="pp_social">{pp_social}</div> \
											<a class="pp_close" href="#">Close</a> \
										</div> \
									</div> \
								</div> \
							</div> \
							</div> \
						</div> \
						<div class="pp_bottom"> \
							<div class="pp_left"></div> \
							<div class="pp_middle"></div> \
							<div class="pp_right"></div> \
						</div> \
					</div> \
					<div...