JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            var options = {fade: 800,            // tid bildene bruker på å fade inn/ut
                           delay: 7000,          // ventetid mellom bildebytte - 7 sekunder
                           height: 400,          // slideshow høyde
                           width: 500,           // slideshow bredde
                           images: "#slideshow", // element hvor bildene ligger
                           index: 0              // intern for å holde litt orden
                          };
        
            (function slide(o) {
                var elems = $('img', o.images).css({height: o.height, width: o.width});
                  o.index = elems.length - 2 < o.index ? 0 : o.index + 1;
        
                $("img:visible", "#slideshow").fadeOut(o.fade);
                $(elems).eq(o.index).fadeIn(o.fade, function() {
                    setTimeout(function() {slide(o);}, o.delay);
                });
            })(options);
        });
    </script>
    <style type="text/css">
        #slideshow img {position: absolute; top: 0; left:0; display:none;}
    </style>
</head>
<body>
    <!-- legg til bilder i slideshow elementet -->
    <div id="slideshow">
        <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcSyjfzLdy3V509AQWXac7SgHz5FldmgpiMkYw6fO_o1SnQHY1t1cHPOiutu"  />
        <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" />
        <img src="http://www.dreamincode.net/forums/uploads/monthly_05_2010/post-380028-12747928967239.jpg.pagespeed.ce.yRppR_j7ae.jpg" />
        <img src="http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg" />
        <img src="http://www.nasa.gov/images/content/66676main_image_feature_221_jw4.jpg" />
    </div>

</body>
</html>