JSFiddle - React, Tailwind, and code Playground

HTML

<section class="slide-up-boxes">

			<a href="http://wufoo.com">
				<h5>Ă–rnek Bir Kutu</h5>
				<div>Wufoo is an online form builder that makes building even the most complex forms so easy, it's fun!</div>				
			</a>
				
			<a href="http://digwp.com">
				<h5>Book I co-authored...</h5>
				<div>Digging Into WordPress is a book and blog I co-author with Jeff Starr about the world's #1 publishing platform.</div>				
			</a>
			
			<a href="http://quotesondesign.com">
				<h5>Words I collect...</h5>
				<div>Quotes on Design is a collection of design related quotes. With an API for your integration ideas!</div>				
			</a>

		</section>

CSS

.slide-up-boxes a { 
			display: block; 
			height: 130px; 
			margin: 0 0 20px 0; 
			background: rgba(215, 215, 215, 0.5); 
			border: 1px solid #ccc; 
			height: 65px; 
			overflow: hidden; 
		}
		
		.slide-up-boxes h5 { 
			color: #333; 
			text-align: center;
			height: 65px; 
			font: italic 18px/65px Georgia, Serif;    /* Vertically center text by making line height equal to height */
			 opacity: 1;
			 -webkit-transition: all 0.2s linear; 
			 -moz-transition: all 0.2s linear; 
			 -o-transition: all 0.2s linear;
		}
		
		.slide-up-boxes a:hover h5 { 
			margin-top: -65px; 
			opacity: 0; 
		}
		
		.slide-up-boxes div { 
			position: relative; 
			color: white; 
			font: 12px/15px Georgia, Serif;
			height: 45px; 
			padding: 10px; 
			opacity: 0; 
			-webkit-transform: rotate(6deg); 
			-webkit-transition: all 0.4s linear; 
			-moz-transform: rotate(6deg); 
			-moz-transition: all 0.4s linear; 
			-o-transform: rotate(6deg); 
			-o-transition: all 0.4s linear; 
		}
		.slide-up-boxes a:hover div { 
			opacity: 1; 
			-webkit-transform: rotate(0); 
			-moz-transform: rotate(0); 
			-o-transform: rotate(0); 
		}
		.slide-up-boxes a:nth-child(1) div { background: #c73b1b url(http://b1303.hizliresim.com/17/u/lh0gc.gif) 17px 17px no-repeat; padding-left: 120px; }
		.slide-up-boxes a:nth-child(2) div { background: #367db2 url(http://b1303.hizliresim.com/17/u/lh0gc.gif) 21px 10px no-repeat; padding-left: 90px; }
		.slide-up-boxes a:nth-child(3) div { background: #393838 url(http://b1303.hizliresim.com/17/u/lh0gc.gif) 14px 16px no-repeat; padding-left: 133px; }

* {
		margin: 0;
		padding: 0;
	}
	body {
		overflow-x: hidden;
	}
	.bsa_it_ad {
		padding: 8px 4px 8px 12px !important;
		position: relative;
		border: 0 !important;
		background: #D6D5D5 !important;
		border-top: 0 !important;
		box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
		font: 11px &quot;Lucida Grande&quot;, Sans-Serif !important;
	}
	.bsa_it_ad:before, .bsa_it_ad:after {
		content:...

JavaScript

(function(){ var bsa = document.createElement(&#39;script&#39;); bsa.type = &#39;text/javascript&#39;; bsa.async = true; bsa.src = &#39;//s3.buysellads.com/ac/bsa.js&#39;; (document.getElementsByTagName(&#39;head&#39;)[0]||document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bsa); })();

var _gaq = _gaq || []; _gaq.push([&#39;_setAccount&#39;, &#39;UA-68528-29&#39;]); _gaq.push([&#39;_trackPageview&#39;]); (function() { var ga = document.createElement(&#39;script&#39;); ga.type = &#39;text/javascript&#39;; ga.async = true; ga.src = (&#39;https:&#39; == document.location.protocol ? &#39;https://ssl&#39; : &#39;http://www&#39;) + &#39;.google-analytics.com/ga.js&#39;; (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(ga); })();