JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js"></script>
<div class="slideshow-normal"> <div id="slider">                                         <img src="http://photography.naturestocklibrary.com/orca-stock-photo.jpg" /><img src="http://photography.naturestocklibrary.com/orca-stock-photo.jpg" /><img src="http://photography.naturestocklibrary.com/orca-stock-photo.jpg" /><img src="http://photography.naturestocklibrary.com/orca-stock-photo.jpg" />                </div>             </div>

CSS

/******************************************************************
****************************** JQUERY PLUGINS *********************
******************************************************************/
/* NIVO SLIDER */
/*
 * jQuery Nivo Slider v2.5.2
 * http://nivo.dev7studios.com
 *
 * Copyright 2011, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * March 2010
 */
 
 
/* The Nivo Slider styles */
.nivoSlider {
    position:relative;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:6;
    display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
}
/* Caption styles */
.nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    opacity:0.8; /* Overridden by captionOpacity setting */
    width:100%;
    z-index:8;
}
.nivo-caption p {
    padding:5px;
    margin:0;
}
.nivo-caption a {
    display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav {
    height: 220px;
    padding: 10px;
    position: absolute;
    width: 900px;
}
.nivo-directionNav a {
    position:relative;
    top:36%;
    z-index:9;
    cursor:pointer;
}
.nivo-prevNav,
.nivo-nextNav {
    background-image: url("../images/slideshow-nav.png");
    height: 44px;
    width: 44px;
}

.nivo-prevNav {
    float: left;
}
.nivo-nextNav {
    float: right;
    background-position: 44px 0;
}
.nivo-prevNav:hover {
    background-position: 0 44px;
}
.nivo-nextNav:hover {
    background-position: 44px 44px;
}

/* Control nav...

JavaScript

jQuery(document).ready(function() {
    jQuery('#slider').nivoSlider({
        startSlide: 0, // Set starting Slide (0 index)
        effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
        animSpeed: 800, // Slide transition speed
        pauseTime: 2500, // How long each slide will show
        pauseOnHover:true, // Stop animation while hovering
        
        keyboardNav: true,
        directionNav: true
    });
});