JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

    <head>
        
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>Test | Failsilder</title>

    </head>
    <body>

        <div id="slideshow">
            
            <div class="slide" data-image="oxford-royale.co.uk/images/slide11.jpg" data-transition="fadein" data-slidetime="3000" data-transitiontime="600"></div>
            <div class="slide" data-image="oxford-royale.co.uk/images/slide3.jpg" data-transition="fadein" data-slidetime="2000" data-transitiontime="500"></div>
            <div class="slide" data-image="siemreapangkorwat.com/wp-content/uploads/2011/05/Slide7.jpg" data-transition="fadein" data-slidetime="4000" data-transitiontime="1000"></div>

        </div><!-- Slideshow -->
        
    </body>

</html>

CSS

@charset "utf-8";

/*    Page-Wrappers */

    .page-wrap {
        margin: 0 auto;
        padding: 0;
        width: 1000px;
    }
    
/* Slideshow */

    #slideshow {
        float: left;
        margin: 0;
        padding: 0;
        position: relative;
        width: 100%;
        height: 400px;
        overflow: hidden;
    }

/* Slide */
    .slide {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        background-position: top center;
        background-repeat: no-repeat;
    }
 
/* Fade-in effect */
    /* Current slide start values */
    .current-fadein-begin {
        opacity: 1;
        z-index: 1;
    }
 
    /* Current slide animation values */
    .current-fadein {
    }
 
    /* Target slide start values */
    .target-fadein-begin {
        opacity: 0;
        z-index: 2;
    }
 
    /* Target slide animation values */
    .target-fadein {
        opacity: 1;
        transition-property: opacity;
        transition-duration: 2s;
        transition-delay: 0s;
        -webkit-transition-property: opacity;
        -webkit-transition-duration: 2s;
        -webkit-transition-delay: 0s;
        -moz-transition-property: opacity;
        -moz-transition-duration: 2s;
        -moz-transition-delay: 0s;
        -o-transition-property: opacity;
        -o-transition-duration: 2s;
        -o-transition-delay: 0s;
    }

JavaScript

// Object for creating an awesome CSS3 tansitions slideshow 
// targetDiv: The DIV where the slideshow needs to run in 
function Slider(targetdiv) { 
 
    // private fields 
    var slides = []; // array of references to the slides 
    var currentIndex = 0; // current index of the slides array 
    var slideTimer = null; // timer for changing slides over time 
    var targetDiv = targetdiv; // div that contains the slideshow and it's slides 
    var defaultTransition = "fadein"; // the transition that will be used by default 
    var defaultSlideTime = 4000; // the default amount of time a slide will show in milliseconds 
    var defaultTransitionTime = 800; // the default amount of time of the transition between slides in milliseconds 
 
    // constructor 
    if(targetDiv) { // Check if target is set 
 
        targetDiv = document.getElementById(targetDiv); // Get target from document 
 
        if(!targetDiv) // Check if target exists 
            throw "The target specified for the slideshow does not exist."; 
        else { 
             
            var slideNodes = targetDiv.getElementsByClassName("slide"); 
            var filterNodes = []; 
 
            for(var index in slideNodes) { 
 
                if(slideNodes[index].nodeName == "DIV") 
                    filterNodes.push(slideNodes[index]); 
 
            } 
 
            for(var index in filterNodes) { // Loop trough slides 
 
                var slideNode = filterNodes[index]; // Get current node 
 
                // Add node fields 
                slideNode.transition = slideNode.getAttribute("data-transition") || defaultTransition; 
                slideNode.transitionTime = parseInt(slideNode.getAttribute("data-transitiontime") || defaultTransitionTime); 
                slideNode.slideTime = parseInt(slideNode.getAttribute("data-slidetime") || defaultSlideTime); 
                 
                // Set styles 
                if(slideNode.getAttribute("data-image")) 
               ...