JSFiddle - React, Tailwind, and code Playground

by OsaMa hawkiq

HTML

<script src="http://demo.web3designs.com/jquery-easing.min.js"></script>
 <script src="http://demo.web3designs.com/jquery-easing.min.js"></script>
<div id="wrap">
    <div id="viewport"></div>

CSS

html,body{
  margin:0;
  padding:0; 
  background:#2A140E; 
  text-align:center;
  color:brown}
a{color:#fff; text-decoration:none}
#wrap{
  margin:0 auto; 
  width:800px; 
  position:relative
}
#viewport {
  position: relative;
  width: 800px;
  height: 600px;
  overflow: hidden;
  background:url('http://demo.web3designs.com/milk_tea.jpg') 0 0 no-repeat
}
#viewport .smoke {
  position: absolute;
  width: 800px;
  height: 800px;
  background:url('http://i.imgur.com/pVI5HbP.png') no-repeat;
  bottom: 230px; 
  margin-left:10px
}

JavaScript

$(function(){
	if(!$.browser.msie){
		var a=0;for(;a<15;a+=1){setTimeout(function b(){var a=Math.random()*1e3+5e3,c=$("<div />",{"class":"smoke",css:{opacity:0,left:Math.random()*200+80}});$(c).appendTo("#viewport");$.when($(c).animate({opacity:1},{duration:a/4,easing:"linear",queue:false,complete:function(){$(c).animate({opacity:0},{duration:a/3,easing:"linear",queue:false})}}),$(c).animate({bottom:$("#viewport").height()},{duration:a,easing:"linear",queue:false})).then(function(){$(c).remove();b()})},Math.random()*3e3)}
	}else{		
	"use strict";var a=0;for(;a<15;a+=1){setTimeout(function b(){var a=Math.random()*1e3+5e3,c=$("<div />",{"class":"smoke",css:{left:Math.random()*200+80}});$(c).appendTo("#viewport");$.when($(c).animate({},{duration:a/4,easing:"linear",queue:false,complete:function(){$(c).animate({},{duration:a/3,easing:"linear",queue:false})}}),$(c).animate({bottom:$("#viewport").height()},{duration:a,easing:"linear",queue:false})).then(function(){$(c).remove();b()})},Math.random()*3e3)}}}())