JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.jssor.com/js/jssor.js"></script>
<script src="http://www.jssor.com/js/jssor.slider.js"></script>
<div style="width:1000px; background-color:green; margin-top:30px;">
    <!-- Jssor Slider Begin -->
    <!-- You can move inline styles to css file or css block. -->
    <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 1000px;  height: 480px; overflow: hidden;">
        <!-- Loading Screen -->
        <div u="loading" style="position: absolute; top: 0px; left: 0px;">
            <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block; top: 0px; left: 0px;width: 100%;height:100%;"></div>
            <div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center;  top: 0px; left: 0px;width: 100%;height:100%;"></div>
        </div>
        <!-- Slides Container -->
        <div u="slides" style="cursor: move; position: absolute; left:0; top: 0px; width: 550px; height: 480px; overflow: hidden;">
            <div>
                <img u="image" src="http://www.jssor.com/img/travel/01.jpg" />
                <img u="thumb" src="http://www.jssor.com/img/travel/thumb-01.jpg" />
                <div u=caption t="L" du="2000" class="captionOrange" style="position:absolute; left:20px; top: 400px; width:200px; height:30px;"> Caption 1 </div>
                <a u="caption" t="R" class="captionOrange" href="http://www.yourdomain.com" style="position: absolute; top: 400px; left: 280px; width: 250px; height: 30px;">www.yourdomain.com</a>

            </div>
            <div>
                <img u="image" src="http://www.jssor.com/img/travel/02.jpg" />
                <img u="thumb" src="http://www.jssor.com/img/travel/thumb-02.jpg" />
            </div>
            <div>
                <img u="image" src="http://www.jssor.com/img/travel/03.jpg" />
                <img u="thumb" src="http://www.jssor.com/img/travel/thumb-03.jpg" />
           ...

CSS

.jssora05l, .jssora05r, .jssora05ldn, .jssora05rdn {
                position: absolute;
                cursor: pointer;
                display: block;
                background: url(../img/a17.png) no-repeat;
                overflow:hidden;
            }
            .jssora05l {
                background-position: -10px -40px;
            }
            .jssora05r {
                background-position: -70px -40px;
            }
            .jssora05l:hover {
                background-position: -130px -40px;
            }
            .jssora05r:hover {
                background-position: -190px -40px;
            }
            .jssora05ldn {
                background-position: -250px -40px;
            }
            .jssora05rdn {
                background-position: -310px -40px;
            }
            /* jssor slider thumbnail navigator skin 02 css */
            .jssort02 .w {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 100%;
            }
            .jssort02 .c {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 95px;
                height: 62px;
                border: #000 0px solid;
            }
            .jssort02 .p:hover .c, .jssort02 .pav:hover .c, .jssort02 .pav .c {
                background: url(../img/t01.png) center center;
                border-width: 0px;
                top: 2px;
                left: 2px;
                width: 95px;
                height: 62px;
            }
            .jssort02 .p:hover .c, .jssort02 .pav:hover .c {
                top: 0px;
                left: 0px;
                width: 97px;
                height: 64px;
                border: #fff 1px solid;
            }
            .thumbnail-custom {
                top:0px !important;
                left:0px !important;
            }

        /* caption css */
        .captionOrange,...

JavaScript

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

     var _SlideshowTransitionsFade = [
     //Fade
     {
         $Duration: 700,
         $Opacity: 2,
         $Brother: {
             $Duration: 1000,
             $Opacity: 2
         }
     }];

     
    var _CaptionTransitions = [];
    _CaptionTransitions["L"] = { $Duration: 900, x: 0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };
    _CaptionTransitions["R"] = { $Duration: 900, x: -0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutSine }, $Opacity: 2 };

     var options = {
         $AutoPlay: true,
         $AutoPlayInterval: 1500,
         $PauseOnHover: 3,
         $DragOrientation: 3,
         $ArrowKeyNavigation: true,
         $SlideshowOptions: {
             $Class: $JssorSlideshowRunner$,
             $Transitions: _SlideshowTransitionsFade,
             $TransitionsOrder: 1,
             $ShowLink: true
         },
         $CaptionSliderOptions: {
                $Class: $JssorCaptionSlider$,
                $CaptionTransitions: _CaptionTransitions,
                $PlayInMode: 1,
                $PlayOutMode: 3
        },

         $ArrowNavigatorOptions: {
             $Class: $JssorArrowNavigator$,
             $ChanceToShow: 1,
             $AutoCenter: 2,
             $Steps: 1
         },

         $ThumbnailNavigatorOptions: {
             $Class: $JssorThumbnailNavigator$,
             $ChanceToShow: 2,
             $ActionMode: 1,
             $Lanes: 4,
             $SpacingX: 10,
             $SpacingY: 12,
             $DisplayPieces: 6,
             $ParkingPosition: 156,
             $Orientation: 2 
         }
     };

     var jssor_slider1 = new $JssorSlider$("slider1_container", options);
     
     function ScaleSlider() {
         var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
         if (parentWidth) jssor_slider1.$ScaleWidth(Math.max(Math.min(parentWidth, 1000), 300));
         else window.setTimeout(ScaleSlider, 30);
     }

     ScaleSlider();

...