JSFiddle - React, Tailwind, and code Playground

by Sergalas

HTML

<div id="twiter">
		<div id="wrapper">
			<div class="text">
				<input type="text" size="36"placeholder="Compose new tweet">
			</div>
			<div id="container">
				<div id="user">
						<span id="corner">2</span>
						<p><span>Michael Shaw</span></p>
						<p>San Francisco, CA</p>
				</div>
				<div id="table">
					<p>2,3k <span>tweets</span></p>
					<p>326<span>following</span></p>
					<p>752<span>followers</span></p>
				</div>
			</div>
			
		</div>
	</div>

CSS

*{
margin:0;
padding:0;}

#twiter{
	position:relative;
	background:url(http://i1052.photobucket.com/albums/s449/Sergalas/bgWidget_zps3a3372e2.jpg) no-repeat;
	height:300px;
	width:400px; 
	margin:auto;
	transition:all .3s ease-in-out;}

	
	
#wrapper{
	height:141px;
	width:242px;
	background:#f2f2f2;
	position:relative;
	border-radius:5px;
	left:80px;
	top:80px;
	transition:all 1s ease-in-out;
	float:left;}
	
#wrapper:before {
	margin-left:217px;
	margin-top:0px;
	display:block;	
	width:25px;
	height:25px;
	background:#0d51a1;
	content:'';
	color:#000;
	position:absolute;
	border-radius:0 5px 0 0;
	box-shadow: 1px -1px 3px #0d51a1;}	
	
#wrapper:hover:before {
	background:#0663d4;
	box-shadow: 2px -2px 3px #0663d4;}
	
#container{
	position:absolute;}
	
#container:after{
	content:'';
	position:absolute;
	height:31px;
	width:31px;
	background:url(http://i1052.photobucket.com/albums/s449/Sergalas/shadow_zps017888da.png);
	left:215px;
	top:0;}
	
#user:after{
	content:"";
	position:absolute;
	left:217px;
	top:-11px;
	right:0;
	border-width:0 25px 25px 0;
	border-style:solid;
	border-color:#fff rgba(0,0,0,0.0);
	display:block;
	width:0;
	box-shadow:0 1px 15px rgba(0,0,0,0.3), -1px 0px 1px rgba(0,0,0,0.2), inset  2px 2px 1px rgba(0,0,0,1.0);}
	
#user{
	height:70px;
	width:242px;
	border-bottom:1px solid #dfdfdf;
	position:relative;
	margin-top:36px;}	
 
#corner{
	font:10px Trebuchet MS;
	color:#fff;
	content:attr(title);
	margin:-7px 0 0 229px;
	display:block;
	position:absolute;}
	
#user p{
	height:50px;
	color:#000;
	font:14px Trebuchet MS;
	background:url(http://i1052.photobucket.com/albums/s449/Sergalas/avatar_zps1cbef709.png) no-repeat;
	background-position:5px,0;
	widows:282px;}	
	#user p:nth-child(1) span{
	margin-left:60px;}
	
#user p:nth-child(2) span:after{
	content:'';
	display:block;
	margin-left:159px;
	margin-top:-37px;
	width:15px;
	height:15px;
	border:1px solid #fff;
	border-radius:50%;
	box-shadow:inset 0px 0px 10px #fff;}
	
#user p:nth-child(2)...