JSFiddle - React, Tailwind, and code Playground

by mark serbol

HTML

<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin porttitor est, venenatis placerat neque luctus et. Aenean purus dui, elementum sed tempus vel, feugiat a lectus. Phasellus ut risus nisi. Vivamus condimentum sodales vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean consequat dictum nisi, id tempus lorem ullamcorper vitae. 
</div>

CSS

div { height:400px; width:400px; color:#FFF; padding:10px; border:4px solid #312C36; box-shadow:0 0 15px #475272;
    
    background-image:url('http://placehold.it/400/A37165.png&text=+');  
    transition: background-image 1s ease-in-out;
    -webkit-transition: background-image 1s ease-in-out;
    -moz-transition: background-image 1s ease-in-out;
    -ms-transition: background-image 1s ease-in-out;
    -o-transition: background-image 1s ease-in-out;
}

JavaScript

var img = new Array ('http://placehold.it/400/7E7F7F.png&text=+', 'http://placehold.it/400/544143.png&text=+',  'http://placehold.it/400/83776B.png&text=+', 'http://placehold.it/400/A37165.png&text=+');

var index = 1;

function changeImage(){ 
    $('div').css({'background-image': 'url('+img[index]+')'});
    if (index == img.length-1){
        index = 0;
    }else{
        index++;
    }  
}

setInterval(changeImage, 2000);