JSFiddle - React, Tailwind, and code Playground

HTML

<title>Foo Foo</title>
<a class="button" href="#">:)</a>
<div id="box">
<p><b>Title!</b>Boring explanation.</p>
</div>

CSS

*{
	/* A universal page reset */
	margin:0;
	padding:0;
}

body{
	/* Setting default text color, background and a font stack */
	font-size:14px;
	color:#fcfcfc;
	background-color:#0d4362;
	font-family:Arial, Helvetica, sans-serif;
}

/* The bouncing box */

#box{
	background:repeat-x center bottom #fcfcfc;
	height:115px;
	padding:20px;
	margin-top:-10px;
	padding-top:30px;
	width:400px;
	border:1px solid #fcfcfc;
	color:#494848;
	text-shadow:1px 1px 0 white;
	font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
}

#box p{
	font-size:25px;
	padding-left:90px;
}

#box p b{
	font-size:52px;
	display:block;
}

#box,
#main,
a.button{
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}

/* Styling the big button */

a.button,
a.button:visited,
a.button:active{
	color:white;
	letter-spacing:-2px;
	padding:10px;
	display:block;
	text-shadow:1px 1px 0 #145982;
	font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
	font-size:40px;
	font-weight:bold;
	text-align:center;
	width:150px;
	border:1px solid #60b4e5;
	
	margin:360px auto;
	
	/*
		CSS3 gradients for webkit and mozilla browsers,
		fallback color for the rest:
	*/
	
	background-color: #59aada;
	background-image: -moz-linear-gradient(#5eb2e2, #4f9cca);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5eb2e2), to(#4f9cca));
}

a.button:hover{
	text-decoration:none;
	background-color: #5eb2e2;
	background-image: -moz-linear-gradient(#6bbbe9, #57a5d4);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6bbbe9), to(#57a5d4));
}

/* Only needed for the demonstration page */

#main{
	background-color:#073753;
	height:500px;
	margin:140px auto 50px;
	padding:90px 30px 0;
	position:relative;
	width:640px;
}

#main p{
	color:#ccc;
	font-size:19px;
	line-height:1.4;
	margin-bottom:20px;
	text-align:center;
}

#main p strong{
	color:white;
}

h1{
	padding:30px 0;
	text-align:center;
	text-shadow:0 1px 1px black;
	margin-bottom:30px;
	font-size:24px;
	font-family:"Myriad...

JavaScript

http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js


(function($){
	
	/* The plugin extends the jQuery Core with four methods */
	
	/* Converting an element into a bounce box: */
	$.fn.bounceBox = function(){
		
		/*
			Applying some CSS rules that center the
			element in the middle of the page and
			move it above the view area of the browser.
		*/
		
		this.css({
			left			: this.outerWidth(),
			marginTop	: this.outerHeight()/2,
			position	: 'fixed',
			bottom		: '50%'
		});
		
		return this;
	}
	
	/* The boxShow method */
	$.fn.bounceBoxShow = function(){
		
		/* Starting a downward animation */
		
		this.stop().animate({right:0});
		this.data('bounceShown',true);
		return this;
	}
	
	/* The boxHide method */
	$.fn.bounceBoxHide = function(){
		
		/* Starting an upward animation */
		
		this.stop().animate({right:-this.outerWidth()});
		this.data('bounceShown',false);
		return this;
	}
	
	/* And the boxToggle method */
	$.fn.bounceBoxToggle = function(){
		
		/* 
			Show or hide the bounceBox depending
			on the 'bounceShown' data variable
		*/
		
		if(this.data('bounceShown'))
			this.bounceBoxHide();
		else
			this.bounceBoxShow();
		
		return this;
	}
	
})(jQuery);
$(document).ready(function(){

	/* Converting the #box div into a bounceBox: */
	$('#box').bounceBox();
	$('#box').css('left');
	/* Listening for the click event and toggling the box: */
	$('a.button').click(function(e){
		$('#box').bounceBoxToggle();
		e.preventDefault();
	});
	
	/* When the box is clicked, hide it: */
	$('#box').click(function(){
		$('#box').bounceBoxHide();
	});
});