JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://mywptestsite.is-great.org/wp-includes/js/jquery/jquery.js?ver=1.10.2"></script>
<script src="http://mywptestsite.is-great.org/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1"></script>
<script src="http://mywptestsite.is-great.org/wp-content/plugins/meteor-slides/js/jquery.cycle.all.js?ver=3.8"></script>
<script src="http://mywptestsite.is-great.org/wp-content/plugins/meteor-slides/js/jquery.metadata.v2.js?ver=3.8"></script>
<script src="http://mywptestsite.is-great.org/wp-content/plugins/meteor-slides/js/jquery.touchwipe.1.1.1.js?ver=3.8"></script>
<script type='text/javascript'>
/* <![CDATA[ */
var meteorslidessettings = {"meteorslideshowspeed":"2000","meteorslideshowduration":"5000","meteorslideshowheight":"400","meteorslideshowwidth":"940","meteorslideshowtransition":"fade"};
/* ]]> */
</script>

<div id="meteor-slideshow" class="meteor-slides  navboth">
	
			
			
			<ul class="meteor-nav">
		
				<li id="meteor-prev" class="prev"><a href="#prev">Previous</a></li>
			
				<li id="meteor-next" class="next"><a href="#next">Next</a></li>
			
			</ul><!-- .meteor-nav -->
		
			<div id="meteor-buttons" class="meteor-buttons"></div>
		
				
			
		<div class="meteor-clip">
	
				
			<img style="visibility: hidden;" class="meteor-shim" src="http://imageshack.com/a/img197/9543/2v8z.jpg" alt="" />
			<div class="mslide mslide-1">
				
									
					<img width="599" height="400" src="http://imageshack.com/a/img197/9543/2v8z.jpg" class="attachment-featured-slide wp-post-image" alt="Look at my nice toy I have here" title="Nulla eu purus et orci" />					
								
				<h1><a href="" title="Nulla eu purus et orci">Nulla eu purus et orci</a></h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			
			</div><!-- .mslide -->
			
						
				
			
			<div class="mslide mslide-2">
				
									
					<img width="599" height="400" src="http://imageshack.com/a/img716/2558/ygzs.jpg" class="attachment-featured-slide wp-post-image" alt="We...

CSS

div.meteor-slides {
	clear: both;
    height: auto !important;
	line-height: 0;
	margin: 0;
	max-width: 100%;
	overflow: visible !important;
	padding: 0;
	position: relative;
	z-index: 1;
}
div.meteor-left {
	clear: none;
	float: left;
	margin: 0 20px 20px 0;
}
div.meteor-right {
	clear: none;
	float: right;
	margin: 0 0 20px 20px;
}
div.meteor-center {
	margin: 0 auto;
}
div.navpaged,
div.navboth {
	margin-bottom: 20px;
}
.meteor-slides .meteor-clip {
	line-height: 0;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: relative;
	width: 100%;
}
.meteor-slides .meteor-shim {
	border: 0;
	height: auto !important;
	margin: 0;
	max-width: 100%;
	padding: 0;
	width: auto\9; /* IE8 */
}
.meteor-slides a:focus {
	outline: none;
}

/* =Slide
-------------------------------------------------------------- */

.meteor-slides .mslide {
	display: none;
	height: auto !important;
	margin: 0;
	max-width: 100%;
	padding: 0;
}
.single-slide .mslide {
	display: block;
}
.meteor-slides .mslide a {
	border: 0;
	margin: 0;
	padding: 0;
}
.meteor-slides .mslide img {
	border: 0;
	box-shadow: none !important;
	display: block;
	height: auto !important;
	margin: auto !important;
	max-width: 100%;
	padding: 0 !important;
	width: auto\9; /* IE8 */
}
.meteor-slides .mslide img[src$='.png'] {
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE7 */
	zoom: 1;	
}

/* =Previous/Next Navigation
-------------------------------------------------------------- */

.meteor-slides ul.meteor-nav {
	display: none;
	list-style: none;
    height: auto;
	margin: 0 !important;
	padding: 0;
}
.meteor-slides.navhover ul.meteor-nav {
	display: inline;
}
ul.meteor-nav li {
	display: inline;
    height: auto;
	list-style: none;
	margin: 0;
	padding: 0;
}
.meteor-nav .prev a {
	left: 0px;
}
.meteor-nav .next a {
	right: 0px;
}
.meteor-nav a...

JavaScript

var $j = jQuery.noConflict();

$j(document).ready(function() {

    // Get the slideshow options
    var $slidespeed      = parseInt( meteorslidessettings.meteorslideshowspeed );
    var $slidetimeout    = parseInt( meteorslidessettings.meteorslideshowduration );
    var $slideheight     = parseInt( meteorslidessettings.meteorslideshowheight );
    var $slidewidth      = parseInt( meteorslidessettings.meteorslideshowwidth );
    var $slidetransition = meteorslidessettings.meteorslideshowtransition;

    // Setup jQuery Cycle
    $j('.meteor-slides').cycle({
        cleartypeNoBg: true,
        fit:           1,
        fx:            $slidetransition,
        height:        $slideheight,
        next:          '#meteor-next',
        pager:         '#meteor-buttons',
        pagerEvent:    'click',
        pause:         1,
        prev:          '#meteor-prev',
        slideExpr:     '.mslide',
        speed:         $slidespeed,
        timeout:       $slidetimeout,
        width:         $slidewidth
    });

    // Setup jQuery TouchWipe
    $j('.meteor-slides').touchwipe({
        wipeLeft: function() {
            $j('.meteor-slides').cycle('next');
        },
        wipeRight: function() {
            $j('.meteor-slides').cycle('prev');
        },
        preventDefaultEvents: false
    });

    // Add class to hide and show prev/next nav on hover
    $j('.meteor-slides').hover(function () {
        $j(this).addClass('navhover');
    }, function () {
        $j(this).removeClass('navhover');
    });

    // Set a fixed height for prev/next nav in IE6
    if(typeof document.body.style.maxWidth === 'undefined') {
        $j('.meteor-nav a').height($slideheight);
    }

    // Add align class if set in metadata
    $j('.meteor-slides').each(function () {
        meteormetadata = $j(this).metadata();
        if (meteormetadata.align == 'left') {
            $j(this).addClass('meteor-left');
        } else if (meteormetadata.align == 'right') {
           ...