JSFiddle - React, Tailwind, and code Playground

by Venkatesan S

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<div>
    
</div>

CSS

div{
    width: 700px;
    height: 420px;
    border: 1px solid black;
    background-color: #666666;
    position: relative;
}
img{
    width: 80px;
    height: 120px;
    position: absolute;
    -webkit-animation-name: fadeOut; 
    -webkit-animation-duration: 5s; 
    -webkit-animation-timing-function: linear;
    animation-name: fadeOut;
    animation-duration: 5s;
    animation-timing-function: linear;
}
@-webkit-keyframes fadeOut {
    0%   {opacity: 1;}
    100%   {opacity: 0;}
}

@keyframes fadeOut {
    0%   {opacity: 1;}
    100%   {opacity: 0;}
}

JavaScript

var img = "http://media.virbcdn.com/cdn_images/resize_1024x1024/5c/8407e57c63c3476d-MarvinFoxPhotographyPortfoliio35.jpg";

function generateRandom(value) {
    var position = Math.floor(Math.random() * value);
    return position;
}
console.log("<img src="+img);
setInterval(function(){
	$("div").append("<img src='"+img+"'>");
    var left = generateRandom(600);
    var top = generateRandom(300);
    $("img").css({"top": top + "px", "left": left + "px"});
},1000);