JSFiddle - React, Tailwind, and code Playground

HTML

<div id="my-folio-of-works" class="svwp">
    <ul>
        <li>
            <img src="http://p5.focus.de/img/fotos/origs3229031/9200745427-w300-h400-o-q75-p5/dig-TIME-Can-Google-solve-Death.jpg" />
        </li>
        <li>
            <img src="http://p5.focus.de/img/fotos/origs3229031/9200745427-w300-h400-o-q75-p5/dig-TIME-Can-Google-solve-Death.jpg" />
        </li>
        <li>
            <img src="http://p5.focus.de/img/fotos/origs3229031/9200745427-w300-h400-o-q75-p5/dig-TIME-Can-Google-solve-Death.jpg" />
        </li>
        <li>
            <img src="http://p5.focus.de/img/fotos/origs3229031/9200745427-w300-h400-o-q75-p5/dig-TIME-Can-Google-solve-Death.jpg" />
        </li>
    </ul>
</div>

CSS

.svwp {
    width: 50px;
    height: 20px;
    background: #fff;
}
/*preloader stuff. do not modify!*/
 .svwp ul {
    position: relative;
    left: -999em;
}
/*preloader stuff. do not modify!*/
 .slideViewer {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: #fff;
}
.slideViewer ul {
    /*your list of images*/
    position: relative;
    left: 0;
    top: 0;
    width: 1%;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.slideViewer ul li {
    float:left;
}
/*typographic info*/
 .slideViewer span.typo {
    padding: 6px;
    /* do not modify padding */
    background: #fff;
    color: #000;
    font: normal 10px Verdana;
}
.thumbSlider {
    /*the thumbnails slider*/
    overflow: hidden;
    width: 1%;
    background: #fff;
}
.thumbSlider ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.thumbSlider ul li {
    float:left;
    margin: 0;
}
.thumbSlider a {
    color: #fff;
    text-decoration: none;
}
.thumbSlider a img {
    border: 0;
    display: block;
    padding: 0;
}
.thumbSlider p.tmbrdr {
    /* the border above -not around- each thumb */
    /* width, height and top values are dynamically added by the script. Do not modify. */
    position:relative;
    left: 0;
    font-size: 0.01em;
    left: 0;
    margin: 0;
    padding: 0;
}
a.left, a.right {
    /*the left and right buttons (links)*/
    background: transparent;
    /* could be any color  */
    color: #ff0000;
    font: bold 16px Arial;
    overflow: hidden;
}
a.left span, a.right span {
}
a.left img, a.right img {
    border: 0;
}
a.l_dis, a.r_dis {
    background: transparent;
    /* ALWAYS leave transparent. this is the 'disabled' state of the link !  */
    cursor: default;
}
a.l_dis span, a.r_dis span {
    visibility: hidden;
}
a:focus {
    outline:none;
}

JavaScript

/*!
 * slideViewerPro 1.5
 * Examples and documentation at: 
 * http://www.gcmingati.net/wordpress/wp-content/lab/jquery/svwt/
 * 2009-2011 Gian Carlo Mingati
 * Version: 1.5.0 (02-AUG-2011)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 * Requires:
 * jQuery v1.6 or later
 * Option:
 * jQuery Timers plugin | plugins.jquery.com/project/timers (for autoslide mode)
 * 
 */
jQuery.extend( jQuery.easing, // from the jquery.easing plugin
{
	easeInOutExpo: function (x, t, b, c, d) {
		if (t==0) return b;
		if (t==d) return b+c;
		if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
		return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
	}
});
jQuery(function(){
   jQuery("div.svwp").prepend("<img src='img/gal/svwloader.gif' class='ldrgif' alt='loading...'/ >"); //change with YOUR loader image path   
});
var j = 0;
jQuery.fn.slideViewerPro = function(settings) {
	  settings = jQuery.extend({
			galBorderWidth: 6,
			thumbsTopMargin: 3, 
			thumbsRightMargin: 3,
			thumbsBorderWidth: 3,
			buttonsWidth: 20,
			galBorderColor: "#ff0000",
			thumbsBorderColor: "#d8d8d8",
			thumbsActiveBorderColor: "#ff0000",
			buttonsTextColor: "#ff0000",
			thumbsBorderOpacity: 1.0, // could be 0, 0.1 up to 1.0
			thumbsActiveBorderOpacity: 1.0, // could be 0, 0.1 up to 1.0
			easeTime: 750,
			asTimer: 4000,
			thumbs: 5,
			thumbsPercentReduction: 12,
			thumbsVis: true,
			easeFunc: "easeInOutExpo",
			leftButtonInner: "-", //could be an image "<img src='images/larw.gif' />" or an escaped char as "&larr";
			rightButtonInner: "+", //could be an image or an escaped char as "&rarr";
			autoslide: false,
			typo: false,
			typoFullOpacity: 0.9,
			shuffle: false
		}, settings);
		
	return this.each(function(){
		function shuffle(a) {
	    var i = a.size();
	    while (--i) {
	        var j = Math.floor(Math.random() * (i));
	        var tmp = a.slice(i, i+1);
	        a.slice(j,...