JSFiddle - React, Tailwind, and code Playground

by KARTHIKEYAN K

HTML

<body>
 <div id="pics">
<img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/02-128.png" width="128" height="128" id="picOne" />
<img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/03-128.png" width="128" height="128" id="picTwo" />
 <img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/04-128.png" width="128" height="128" id="picThree" />
<img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/05-128.png" width="128" height="128"  id="picFour" />
<img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/06-128.png" width="128" height="128"  id="picFive" />
<img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/07-128.png" width="128" height="128"  id="picSix" />
<img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/08-128.png" width="128" height="128"  id="picSeven" />
<img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/09-128.png" width="128" height="128"  id="picEight" />
<img src="https://cdn3.iconfinder.com/data/icons/numbers-6/300/10-128.png" width="128" height="128"  id="picNine" />
</div>
<div>
<a id="link" href="http://example.com"></a>
</div>
</body>

CSS

#pics {
    margin-left:600px;
    margin-top: 150px;
    margin-bottom:150px;
}

#title {
    margin-left:500px;
   margin-right:320px;
    margin-top: 150px;
    margin-bottom:150px;

}
body
{
    background-color: MediumSpringGreen;
}
#picOne, #picTwo,#picThree,#picFour,#picFive,#picSix,#picSeven,#picEight,#picNine{
position:absolute;
display: none;
}

#pics {
width:100px;
height:100px;
}

JavaScript

$(document).ready(function() {
$('#picOne').fadeIn(1500).delay(3500).fadeOut(1500);
$('#picTwo').delay(5000).fadeIn(1500).delay(3500).fadeOut(1500);
$('#picThree').delay(10000).fadeIn(1500).delay(3500).fadeOut(1500);
$('#picFour').delay(15000).fadeIn(1500).delay(3500).fadeOut(1500);
$('#picFive').delay(20000).fadeIn(1500).delay(3500).fadeOut(1500);
$('#picSix').delay(25000).fadeIn(1500).delay(3500).fadeOut(1500);
$('#picSeven').delay(30000).fadeIn(1500).delay(3500).fadeOut(1500);
$('#picEight').delay(35000).fadeIn(1500).delay(3500).fadeOut(1500);
$('#picNine').delay(40000).fadeIn(1500).delay(3500).fadeOut(1500);
var delay =40000; 
var URL='http://2.bp.blogspot.com/-2mNLuYYudGs/VV__xP-jFiI/AAAAAAAABsg/CMXsLd_zlnc/s1600/best-wishes-of-onam.jpg';
setTimeout(function(){ window.location = URL; }, delay);
});