border:1px solid black;

dabblet.css

/*start reset css*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { border: 0; font-size: 100%; font: inherit; vertical-align: baseline; margin: 0; padding: 0; }
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block; }
html,textarea { overflow: auto; }
body { line-height: 1; }
ol,ul { list-style: none; }
blockquote,q { quotes: none; }
blockquote:before,blockquote:after,q:before,q:after { content: none; }
table{ border-collapse: collapse; border-spacing: 0; }
img { vertical-align: top; }
:focus { outline: none; }
/*end reset css*/
.clearfix:after{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
body{
	background:#10111d;
	font:12px 'Trebuchet MS', sans-serif;
}
#container{
	width:400px;
	height:300px;
	margin:0 auto;
	background:url(https://dl.dropbox.com/s/k3nmif2ylcb4gvq/bg.jpg?token_hash=AAEnnLqunWN0dbGPQyZtrTlRZYayFzcLLjYNaX_ptufF2w&dl=1) no-repeat;
}
.twitter_wrapper{
	min-width:243px;
	height:123px;
	position:absolute;
	top:70px;
	left:50%;
	margin-left:-121px;	
	text-shadow:rgba(255,255,255,0.7) 0 1px 0;
}
.twitter_widget{
	height:121px;
	min-width:243px;
	position:relative;
	background:#f2f2f2;
	border-radius:3px;
	border:1px solid #f5f5f5;
	border-top:1px solid #fff;
	box-shadow:rgba(0,0,0,0.4) 0 0 2px 1px;
	z-index:10;
}
.user_info{
	height:48px;
	border-bottom:1px solid #f5f5f5;
	padding:10px;
}
.user_info p{
	font-size:16px;
	font-weight:bold;
	margin:6px 0 0 60px; 
}
.user_info span{
	color:#555555;
	font-size:11px;
	margin-left:10px;
	padding-left:8px;
	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAKCAYAAACXDi8zAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4NUEzMTJCRTBCMjA2ODExOEMxNEI3NzJFOUU0MzIyOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCM0JENjY0Njk0OUYxMUUyOTREMkM4NTFFQUJFMDMwOCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCM0JENjY0NTk0OUYxMUUyOTREMkM4NTFFQUJFMDMwOCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBMzM4RjE4QTMxOTNFMjExQTI3NUQ4QzI0OTk2NDI0MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4NUEzMTJCRTBCMjA2ODExOEMxNEI3NzJFOUU0MzIyOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhRzYYcAAACpSURBVHjadI8tEoMwEIXfZmo4CKhMFL4mHAEuwD1io2g0AlXHETrDBdCYcgJ0Ut1ttqJT0a55+/u+WWJm/IpTSo88YYQQsG0btNZwzpGS5jBcUFUVpmlCWZbouu6mntlq3++w1oKI0DSNOJ2VykVRFFiWBcITzXFQjJHHccS6rt/sK6WUWDb7vv9053kWOISPuq7fqTFG4IBYyZWo955T1rZtQf8efAkwACtRUK7OBfX9AAAAAElFTkSuQmCC) no-repeat 0 center;
}
.user_info img{
	float:left;
}
.stats p{
	text-align:center;
	color:#555555;
	font-size:12px;
	display:block;
	float:left;
	width:80px;
	height:44px;
	padding-top:8px;
	border-right:1px solid #dfdfe0;
	border-top:1px solid #dfdfe0;
	box-shadow:rgba(255,255,255,0.5) 0 0 0 1px inset; 
}
.stats p:last-child{
	border-right:none;
}
.stats p:hover{
	color:#4076b7;
}
.stats p span{
	display:block;
	font-size:16px;
	font-weight:bold;
	color:#000;
}
.stats p:hover span{
	color:#0e52a2;
}
.twitter_widget>span{
	position:absolute;
	right:4px;
	top:4px;
	font-family:arial;
	display:block;
	text-align:center;
	width:14px;
	height:14px;
	border-radius:50%;
	border:1px solid #6994c5;
	box-shadow:rgba(0,0,0,0.5) 0 0 3px;
	text-shadow:rgba(0,0,0,0.5) 0 0 2px;;
	background:#3d74b5;
	color:#a5bedc;
	z-index:5;
}
.twitter_widget:before{
	display:block;
	content:'';
	position:absolute;
	top:-1px;
	right:-1px;
	width:35px;
	height:35px;
	background:#0d4e9e;
	border:1px solid #2c69ad;
	border-radius:0 3px 0 0;
	z-index:1;
	box-shadow:rgba(0,114,255,0.4) 2px -2px 4px;
	transition:all 0.3s linear;
	-webkit-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
}
.twitter_widget:hover:before{
	background:#0663d4;
	box-shadow:rgba(0,114,255,0.5) 2px -2px 4px;
}
.corner{
	position:absolute;
	overflow:hidden;
	top:-1px;
	right:11px;
	width:30px;
	height:54px;
	border-radius:5px/20px;
	z-index:10;
	-webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    transform:rotate(-45deg);
	background:#f2f2f2;
/* 	border:1px solid black; */
}
.corner:after{
	content:'';
	display:block;
	position:absolute;
	z-index:5;
	top:15px;
	right:-15px;
	width:26px;
	height:26px;
	-webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    transform:rotate(-45deg);
	box-shadow:rgba(0,0,0,0.2) 0 0 4px, #dad9d9 0 0 0 1px;
	background: -moz-linear-gradient(-45deg,  rgba(0,0,0,0) 33%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
	background: -webkit-linear-gradient(-45deg,  rgba(0,0,0,0) 33%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg,  rgba(0,0,0,0) 33%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg,  rgba(0,0,0,0) 33%,rgba(0,0,0,0.65) 100%); /* IE10+ */
	background: linear-gradient(135deg,  rgba(0,0,0,0) 33%,rgba(0,0,0,0.65) 100%); /* W3C */
}
.compose_card{
	position:absolute;
	z-index:5;
	left:0;
	bottom:-6px;
	height:40px;
	width:245px;
	background:#ddd;
	border-radius:0 0 3px 3px;
	transition:bottom 0.2s linear;
	-webkit-transition:bottom 0.2s linear;
	-o-transition:bottom 0.2s linear;
	-moz-transition:bottom 0.2s linear;
}
.compose_card input{
	width:100%;
	height:35px;
	border:none;
	background:transparent;
	font-style:italic;
	text-indent:12px;
	color:#a5a5a6;
	text-shadow:rgba(255,255,255,0.5) 0 1px 0;
	border-radius:0 0 3px 3px;
	box-shadow:rgba(0,0,0,0.4) 0 0 2px 1px;
}
.twitter_wrapper:hover .compose_card{
	bottom:-38px;
}

dabblet.html

<div id="container">
	
		<div class="twitter_wrapper">
			<div class="twitter_widget">
				<div class="user_info">
					<img src="https://dl.dropbox.com/s/2e9tl5djnha3t2o/avatar.png?token_hash=AAHRdtwXXyPfctQuBJU-zeLsDWDBBNR6sF-QpBmDiv5dAg&dl=1" alt="avatar" />
					<p>Michael Shaw</p>
					<span>San Francisco, CA</span>
				</div>
				<div class="stats">
					<p><span>2,3k</span>tweets</p>
					<p><span>326</span>following</p>
					<p><span>752</span>followers</p>
				</div>
				<span>2</span>
				<div class="corner"></div>
			</div>
			<div class="compose_card">
				<form name="twitter_form" method="post" action="">
					<input type="text" placeholder="Compose new tweet" /> 
				</form>
			</div>
		</div>
		
	</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}