A CodePen by Cameron Baney. Twitter Widget - Dribbble rebound of Edwin Delgado's original shot Fonts are a little different because I did not have webfont access to Segoe

index.html

<div class="twitter-widget">
  	<div class="header cf">
      <a href="http://twitter.com/kayrel" target="_blank" class="avatar"><img src="http://cameronbaney.com/codepen/twitter-widget/avatar.jpg" alt="Edwin Delgado"></a>
			<h2>Edwin Delgado @kayrel</h2>
			<p>I do not recall how I came into existence.<br>Something to do with my dad and mom.</p>
		</div>
		<div class="stats cf">
			<a href="#" class="stat">
				<strong>1,250</strong>
				tweets
			</a>
			<a href="#" class="stat">
				<strong>60</strong>
				following
			</a>
			<a href="#" class="stat">
				<strong>117</strong>
				followers
			</a>
		</div>
		<ul class="menu cf">
			<li><a href="#" class="ico-compose">Compose</a></li>
			<li><a href="#" class="ico-mentions">Mentions</a></li>
			<li><a href="#" class="ico-profile">Profile</a></li>
			<li><a href="#" class="ico-settings">Settings</a></li>
		</ul>
	</div>

	<p>Dribbble Rebound of <a target="_blank" href="http://dribbble.com/shots/833870-Rebound-Twitter">Rebound Twitter</a> by <a target="_blank" href="http://dribbble.com/Kayrel">Edwin Delgado</a></p>

script.js

/* 

Dribbble Rebound of Edwin Delgado's original shot
http://dribbble.com/shots/833870-Rebound-Twitter

Follow Me on Twitter: https://twitter.com/cameronbaney

Fonts are a little different because I did not have webfont access to Segoe

*/

style.css

/*--------------------------------------------------------------
1.1 - CLEARFIX
--------------------------------------------------------------*/
.cf:before,
.cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}

/*--------------------------------------------------------------
1.2 - FORMATTING
--------------------------------------------------------------*/
body {
  background: #343434 url(http://cameronbaney.com/codepen/twitter-widget/bg.jpg);
  background-size: cover;
  color: #4c4c4c;
  font:300 1.1em/1.7em 'HelveticaNeue-Light', Helvetica, Arial, sans-serif;
}

body > p {
  bottom: 10px;
	color: #fff;
	font-size: 12px;
	left: 10px;
	position: absolute;
}
body > p a {
	color: #fff
}

/*--------------------------------------------------------------
2.0 - TWITTER WIDGET
--------------------------------------------------------------*/
.twitter-widget {
	color: #4c4c4c;
	height: 249px;
	left:50%;
	margin: -125px 0 0 -223px;
	position: absolute;
	top:50%;
	width:446px;
	box-shadow: 1px 1px 16px rgba(0,0,0,.58);
	border-radius:2px;
}

/*--------------------------------------------------------------
2.1 - TWITTER WIDGET HEADER
--------------------------------------------------------------*/
.header {
	background: url(http://cameronbaney.com/codepen/twitter-widget/bg-header.jpg) no-repeat;
	color: #fdfdfd;
	font: 12px/17px 'HelveticaNeue-UltraLight', Helvetica, Arial, sans-serif;
	padding: 18px 28px 20px;
	border-radius:2px 2px 0 0;
}
.avatar {
	border: 4px solid #29c6f5;
	border-top-width:3px;
	float: left;
	margin-right: 16px;
	position: relative;
	box-shadow: 0 1px 1px rgba(0,0,0,.6), 0 -1px 0 #9ce5fa;
	border-radius: 2px
}
	.avatar::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		box-shadow: 0 1px 3px rgba(0,0,0,.4) inset;
		-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4) inset;
		-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4) inset;
	}
	.avatar img {
		display: block;
		box-shadow: 0 0 2px rgba(0,0,0,.5) inset
	}
.header h2, .header p {
	float: left;
	width:288px;
}
	.header h2 {
		font-size:26px;
		line-height: 32px;
		margin: 10px 0 8px
	}

/*--------------------------------------------------------------
2.2 - TWITTER WIDGET STATS
--------------------------------------------------------------*/
.stats {
	background: rgb(243,243,243);
	background: -moz-linear-gradient(top, rgba(243,243,243,1) 0%, rgba(236,236,237,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(243,243,243,1)), color-stop(100%,rgba(236,236,237,1)));
	background: -webkit-linear-gradient(top, rgba(243,243,243,1) 0%,rgba(236,236,237,1) 100%);
	background: -o-linear-gradient(top, rgba(243,243,243,1) 0%,rgba(236,236,237,1) 100%);
	background: -ms-linear-gradient(top, rgba(243,243,243,1) 0%,rgba(236,236,237,1) 100%);
	background: linear-gradient(to bottom, rgba(243,243,243,1) 0%,rgba(236,236,237,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#ececed',GradientType=0 );
	border-top:1px solid #fff;
	border-bottom: 1px solid #d4d4d4;
}
.stat {
	color: #4c4c4c;
	float:left;
	font-size: 14px;
	line-height: 17px;
	padding: 15px 0 14px;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px 0 #fff;
	width:148px;
}
	.stat:first-child{
		margin-left: 1px
	}
	.stat:hover {
		color: #747474
	}
.stat strong {
	display: block;
	font-size: 25px;
	line-height: 25px
}

/*--------------------------------------------------------------
2.3 - TWITTER WIDGET MENU
--------------------------------------------------------------*/
.menu {
	background: rgb(236,236,236);
	background: -moz-linear-gradient(top, rgba(236,236,236,1) 0%, rgba(233,233,233,1) 86%, rgba(232,232,232,1) 94%, rgba(228,228,228,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(236,236,236,1)), color-stop(86%,rgba(233,233,233,1)), color-stop(94%,rgba(232,232,232,1)), color-stop(100%,rgba(228,228,228,1)));
	background: -webkit-linear-gradient(top, rgba(236,236,236,1) 0%,rgba(233,233,233,1) 86%,rgba(232,232,232,1) 94%,rgba(228,228,228,1) 100%);
	background: -o-linear-gradient(top, rgba(236,236,236,1) 0%,rgba(233,233,233,1) 86%,rgba(232,232,232,1) 94%,rgba(228,228,228,1) 100%);
	background: -ms-linear-gradient(top, rgba(236,236,236,1) 0%,rgba(233,233,233,1) 86%,rgba(232,232,232,1) 94%,rgba(228,228,228,1) 100%);
	background: linear-gradient(to bottom, rgba(236,236,236,1) 0%,rgba(233,233,233,1) 86%,rgba(232,232,232,1) 94%,rgba(228,228,228,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececec', endColorstr='#e4e4e4',GradientType=0 );
	border-top:1px solid #fff;
	border-radius:0 0 2px 2px;
	padding: 11px 0;
	text-align: center
}
.menu li {
	display:inline-block;
	margin: 0 34px
}
.menu a {
	background: url(http://cameronbaney.com/codepen/twitter-widget/icons.png) no-repeat;
	display:block;
	overflow: hidden;
	text-indent: -9999px
}
	.menu .ico-compose {
		background-position:-1px -2px;
		width: 25px;
		height: 26px;
	}
	.menu .ico-mentions {
		background-position: -31px -1px;
		width: 27px;
		height: 28px;
	}
	.menu .ico-profile {
		background-position: -65px -1px;
		width: 24px;
		height: 27px;
	}
	.menu .ico-settings {
		background-position: -97px -2px;
		width: 26px;
		height: 27px;
	}
	.menu a:hover {
		opacity:.75
	}