JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://nivo.dev7studios.com/wp-content/plugins/nivo-slider/scripts/nivo-slider/jquery.nivo.slider.pack.js"></script>
<div id="wrapper">
    <a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios"></a>
    <div class="slider-wrapper theme-default">
        <div class="ribbon"></div>
        <div id="slider" class="nivoSlider">
            <img src="http://i.imgur.com/DMWEZ.jpg" alt="" />
            <a href="http://dev7studios.com">
                <img src="http://i.imgur.com/GnASW.jpg" alt="" title="caption" />
            </a>
            <img src="http://i.imgur.com/5y96P.jpg" alt="" data-transition="slideInLeft" />
            <img src="http://i.imgur.com/9eg2i.jpg" alt="" title="#htmlcaption" />
        </div>
        <div id="htmlcaption" class="nivo-html-caption">
            <strong>This</strong> example <em>HTML</em> caption<a href="#">a link</a>.
        </div>
    </div>
</div>

CSS

.theme-default .nivoSlider {
    position:relative;
    background-image: #FFFFFF;
    margin-bottom:50px;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
.theme-default .nivoSlider a {
    border:0;
    display:block;
}

.theme-default .nivo-controlNav {
    position:absolute;
    left:50%;
    bottom:-42px;
    margin-left:-40px; /* Tweak this to center bullets */
}
.theme-default .nivo-controlNav a {
    display:block;
    width:22px;
    height:22px;
    background:url(bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
}
.theme-default .nivo-controlNav a.active {
    background-position:0 -22px;
}

.theme-default .nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
}
.theme-default a.nivo-nextNav {
    background-position:-30px 0;
    right:15px;
}
.theme-default a.nivo-prevNav {
    left:15px;
}

.theme-default .nivo-caption {
    font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
    color:#fff;
    border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
    color:#fff;
}

.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;
   ...

JavaScript

//no wrap(head) here

$(window).load(function() {
   $('#slider').nivoSlider();
});


//this works in the Page

jQuery(function ($) {
   $('#slider').nivoSlider();
});


//onLoad here

//$(function () {
//   $('#slider').nivoSlider();
//});