JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <div id="content">      
            <div id="gallery"></div>
        </div>
    </body>

CSS

body{ 
    background: #000; 
    color: #fff; padding: 0; 
    margin: 0; 
    font-family: verdana, sans-serif;
}
h1{ font-size: 0.7em; font-weight: normal; }

/******************
      Gallery
*******************/
.gallery-outer-wrapper{
    padding: 50px 0;
    width: 100%; height: 500px;
    background: #fff;
}
.gallery-inner-wrapper{
    width: 60%; height: 400px;
    margin: 0 auto;
    border: 1px solid #000;
    overflow: hidden;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.gallery-nav {
    width: 60%; height: 50px;
    margin: 0 auto;
    text-align: center;
}
.gallery-img-content {
    margin: 5px;
    position: absolute;
    z-index: 1;
}
.gallery-a{
    width: 200px; height: 35px;
    background: url(../img/tpl/gallery-a.png) #0a8aff no-repeat  93% 50%;

    text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
    color: #fff;
    text-align: left;
    padding-left: 10px;
    line-height: 35px;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.gallery-nav-item, .gallery-nav-item-active {
    width: 24px; height: 32px;
    display: block;
    float: left;
}
.gallery-nav-item:hover { cursor: pointer; }
.gallery-slideshow{
    width: 100%; height: 400px;
}
.gallery-slideshow .gallery-image-wrapper{
    position: absolute;
    
    opacity: 0;   
    filter: alpha(opacity=0);
    -ms-filter: alpha(opacity=0);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";   /* IE 8 */
}
.gallery-image-wrapper img {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
.gallery-slideshow div.show{ 
    opacity: 1; 
    filter: alpha(opacity=100); 
    -ms-filter: alpha(opacity=100);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";   /* IE 8 */
}


/******************
      Images
*******************/
.gallery-inner-wrapper.gallery-cursor-left { cursor: url(../img/tpl/gallery-cursor-left.png)...

JavaScript

(function($) {

    $.fn.slide = function (opts, imgs){
        
        if(!$(this).is(':animated')) {
            var $this = $(this),
            $parent = $this.parent(),
            $content = $parent.find('.gallery-img-content-wrapper'),
            $innerWrapper = $parent.parents('.gallery-inner-wrapper')
        
            //p.speed = navigator.userAgent.match(/AppleWebKit/) && ! navigator.userAgent.match(/Chrome/) ? 600 : p.speed;
               
        
        
            var l = (imgs[imgs.length-1] == undefined) ? l = --imgs.length : l = imgs.length;
  
            if(!positionCheck(opts.i, l)) {
                    
                return $this;
                    
            } else { 
                      
                
                $('.gallery-nav-item-active').removeClass('gallery-nav-item-active');
                $('.gallery-nav-item[id$='+opts.index+'nav'+opts.id+']').addClass('gallery-nav-item-active');

                if(jQuery.support.opacity) {

                    $next = $parent.find('div[id$='+opts.index+'img'+opts.id+']'),
                    $old = $this;

                    $content
                    .hide()
                    .html(imgs[opts.index].content || '');

                    if(parseInt($old.attr('id'), 10) < parseInt($next.attr('id'), 10)) {
                        $next.animate({

                            opacity: 1

                        }, opts.speed, function () {

                            $next                                           
                            .addClass('show')              


                            $old
                            .removeClass('show')
                            .removeAttr('style')
                            .remove( '.gallery-img-content' )

                            $content.show();
                        });
                    } else {

                        $next             
                        .addClass('show')            
       ...