JSFiddle - React, Tailwind, and code Playground

HTML

<header>
Windows 8 Tiles Demo
</header>

<div class="windows8">
<div id="content">Metro Style</div>
</div>

CSS

header
{
	position:absolute;
	top:0px;
	text-align:left;
	width:90%;
	margin:40px;

	text-shadow: 1px 5px 2px #ccc;
	font-size:2em;
}



.windows8
{
	position:relative;
	margin:100px;
	height:200px;
	width:200px;
	box-shadow: 0px 0px 2px #D0D5F0;
	background:url('http://icons.iconarchive.com/icons/dakirby309/windows-8-metro/256/Folders-OS-Apple-Metro-icon.png');
	background-position:center;
}

.windows8 #content
{
	height:0px;
	width:180px;
	position:absolute;
	bottom:0;
	visibility:hidden;
	padding:10px;
	transition:all 0.4s ease-in;
	-moz-transition:all 0.4s ease-in; /* Firefox 4 */
	-webkit-transition:all 0.4s linear; /* Safari and Chrome */
	z-index:999;
	-o-transition:all 0.4s ease-in; /* Opera */

}

.windows8:onclick #content
{
		background-color:rgba(255,51,0,0.9);
		visibility:visible;
		height:120px;
		box-shadow: 0px 10px 0px #FF3300;

}