JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
	<title> TikiCraft </title>
	<link rel="stylesheet" href="main.css">
</head>
<body>
	<div class="quarts">
		<div class="header">
			<div class="pagetitle">
				TikiCraft
			</div>
			<div class="pagesubtitle">
				A server full of Tiki
			</div>
			<div class="headerlinks">
				<a class="headerlink">
					home
				</a><!--
			 --><a class="headerlink">
					more info
				</a><!--
			 --><a class="headerlink">
					rules
				</a><!--
			 --><a class="headerlink">
					blog
				</a><!--
			 --><a class="headerlink">
					tiki-rail
				</a><!--
			 --><a class="headerlink">
					dynmap
				</a><!--
			 --><a class="headerlink">
					contact us
				</a>
			</div>
		</div>
	<div class="showoff">
		<div class="item" style="background-image:url(http://d2bm3ljpacyxu8.cloudfront.net/width/665/tiki-craft.webs.com/2012-11-25_10.34.27.png)">
			<div class="itemtext">
				<div class="itemname">
					Server Info
				</div>
				<div class="itemdesc">
					Owner: northmeister<br/>
					IP: mc.tiki-craft.cu.cc<br/>
					Max slots: 40<br/>
					CB Version: 1.5<br/>
					GM: Survival<br/>
				</div>
			</div>
		</div><!--
	 --><div class="item" style="background-image:url(http://media-mcw.cursecdn.com/c/c5/Grass.png)">
			<div class="itemtext">
				<div class="itemname">
					Server Specs
				</div>
				<div class="itemdesc">
					Dedicated RAM: 1024MB<br/>
					Absolutely no lag!<br/><br/>
					Hosted in Paris, France<br/>
					99% Uptime!
				</div>
			</div>
		</div><!--
	 --><div class="item" style="background-image:url(http://d2bm3ljpacyxu8.cloudfront.net/width/665/tiki-craft.webs.com/2012-12-01_13.22.03.png)">
			<div class="itemtext">
				<div class="itemname">
					Our Community
				</div>
				<div class="itemdesc">
					I am a example description!I am a example description!I am a example description!I am a example description!
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>

CSS

body {
	margin:0;
	margin-top:10px;
	text-align: center;
	background-color: #FFFFFF;
}
.quarts{
	display:inline-block;
	width:768px;
	text-align: left;
}
.header{
	width:768px;
	display:inline-block;
	text-align: center;
}
.pagetitle {
	font-size: 100px;
	font-family: Myriad Pro,Helvetica,Arial,Sans,sans-serif;
	display: block;
	color: #000000;
	font-weight:600;
}
.pagesubtitle {
	font-size: 16px;
	font-family: Myriad Pro,Helvetica,Arial,Sans,sans-serif;
	display: block;
	color: #000000;
	font-weight:400;
	margin-top:-16px;
}
.headerlinks {
	font-size: 16px;
	font-family: Myriad Pro,Helvetica,Arial,Sans,sans-serif;
	background-color: #FFFFFF;
	display:block;
}
.headerlink {
	cursor:pointer;
	font-size: 16px;
	vertical-align:middle;
	display:inline-block;
	padding:10px 20px;
	color: #888888;
	font-weight:600;
}
.headerlink:hover {
	color: #000000;
}
.showoff{
	display:inline-block;
	width:512px;
}
.item {
	width:256px;
	height:256px;
	overflow:hidden;
	display:table-cell;
	background-position:50%;
	background-size:cover;
}
.itemtext {
	width:232px;
	height:104px;
	position:relative;
	display:block;
	overflow:hidden;
	background-color:rgba(0,0,0,0.5);
	padding:12px;
}
.itemname {
	font-family: sans-serif;
	font-weight: 300;
	color: white;
	display: block;
	font-size: 16px;
}

.itemdesc {
	font-family: sans-serif;
	font-weight: 300;
	color: white;
	display: block;
	margin-top: 10px;
	font-size: 12px;
}
.item {
	display:table-cell;
}
.quarts, .header, .showoff {
	width: 768px;
}
.itemtext {
	top:216px;
	-webkit-transition:all 0.25s ease-in-out;
}
.item:hover .itemtext {	
	-webkit-transition:all 0.25s ease-in-out;
 	top:128px;
}