JSFiddle - React, Tailwind, and code Playground

by Nikhil Mangal

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div id="container">
	<div id="c1">Contribute</div>
    <div id="c2"><img src="http://2.bp.blogspot.com/-JbiXdgYK6dI/VJj7sU3EKsI/AAAAAAAAC1I/csBLuzd3v94/s1600/bgicons-sprite.png" height="80px" /></div>
    <div id="c3">
    	<p>
        	After surfing through hundreds of jsperf tests, today I bring to you jsperf – best of (2000-2013).After surfing through hundreds of jsperf tests, 
        </p>
    </div>
</div>
<center>
<br />
<input type="button" value="click" onclick="ani()" />
</center>

CSS

body{font-family:Arial, Helvetica, sans-serif;}
p{font-size:12px;color:#fff;text-align:center;text-shadow:1px 1px 1px #333;}
#container{width:200px;height:300px;background:#01b0ec;margin:100px auto auto auto;border:solid 1px #333;overflow:hidden;}
#container #c1{font-size:22px;color:#fff;text-shadow:1px 1px 1px #333;text-transform:uppercase;text-align:center;width:110px;margin:20px 0px 0px -155px;}
#container #c2{width:70px;height:80px;margin:-140px auto auto auto;}
#container #c3{margin:20px 0px 0px -200px;width:200px;}

JavaScript

function ani()
		{	
		$('#container #c1').animate({"marginLeft":"30px"},400,function(){
				$('#container #c2').animate({"marginTop":"40px"},{easing:"easeOutBounce",duration:"1000"})
			});
		$("#container #c3").delay(1000).animate({"marginLeft":"0px"},500);
		}