JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div class="content"></div>
    <div class="content">
        <div class="mask"></div>
    </div>
    <div id="loading">Loading...</div>
    <div class="progress"></div>
</div>

CSS

#wrapper
{
    width:336px;
    height:226px;
    padding:20px;
    background:#eee;
    border-radius:10px;
    border:1px solid #ccc;
    position:relative;
}

.content
{
    position:relative;
    width:100%;
    height:100%;
}

.content > *
{
    width:100%;
    height:100%;
    position:absolute;
    background-color:#eee;
}

.content > * > img
{
    max-width:100%;
    max-height:100%;
}

#loading
{
    position:absolute;
    top:50%;
    left:50%;
    width: 4em;
    margin-left:-2em;
    color:#aaa;
    font-family:sans-serif;
}

.progress
{
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-50px;
    margin-top:20px;
    width:100px;
    height:5px;
    background:#eee;
    border:1px solid #aaa;
}



.content .mask
{
    max-width:100%;
    max-height:100%;
    background-color:#eee;
    top:-100%;
}

JavaScript

$(document).ready(function(){

    var images = [
        "http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_003b.jpg",
        "http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_004b.jpg",
        "http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_005b.jpg",
        "http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_001b.jpg"
    ];
    
    var delay = 2000;
    var transition = 1000;
    var j = 1;
    var i = 0;
    var d = 0;
    
    var parent = $(".content")[0];
    var progress = $(".progress")[0];
    
    (function getImage()
    {
        var wrap = document.createElement("a");
        var img = document.createElement("img");
        img.src = images[i];
        wrap.href=img.src;
        wrap.target="_blank";
        img.onload = function(){
            wrap.appendChild(this);
            parent.appendChild(this.parentNode,parent.childNodes[0]);
            wrap.style.backgroundImage = "url(" + this.src + ")";
            wrap.style.backgroundPosition = "center center";
            wrap.style.backgroundRepeat = "no-repeat";
            wrap.style.backgroundSize = "100%";
            wrap.removeChild(this);
            
            progress.style.borderLeftWidth = j/images.length*100 + "px";
            progress.style.width = (100 - j/images.length*100) + "px";
            j++;
            
            if(i++ == images.length - 1)
            {
                i = 0;
                startSlides();
            } else
            {
                getImage();
            }
        }
    })();
    
    function startSlides()
    {
        $([progress,loading]).delay(100).fadeTo(100,0,function(){
            $(".mask").delay(100).fadeTo(1000,0,function(){
                $(this).hide();
                slide();
            });
        });
    }
    
    function slide()
    {
        $(".content:first :last").delay(delay).fadeTo(transition,0,function(){
            $(this).insertBefore($(this).siblings(":first")).fadeTo(0,1);
     ...