JSFiddle - React, Tailwind, and code Playground
by Opick Kusanagi
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class='widget widget-about'><div class='head-bg' style='background-image: url(http://4.bp.blogspot.com/-DHrUnQbjCVc/U60uWKDrF7I/AAAAAAAAArI/r_S_ibGTUQE/s1600/about-block-bg2.jpg)'><div class='my-pic'><img alt='M. Taufiq Nur' src='http://1.bp.blogspot.com/-gMYrda-nfHU/U60uWCITFSI/AAAAAAAAArM/JVdXfWookvY/s1600/my-pic-widget.jpg'/></div><div class='my-data'><span class='my-name'>M. Taufiq Nur</span> <span class='my-job'>Author</span></div></div><div class='my-words'>Saya adalah seorang Mahasiswa yang sangat menyukai dunia blogger. Bila ingin mengenal lebih jauh, silahkan follow akun sosial media saya.</div><div class='social-icon'><a href='http://wajahilmu.blogspot.com/'><i class='fa fa-facebook'/></a><a href='http://wajahilmu.blogspot.com/'><i class='fa fa-twitter'/></a><a href='http://wajahilmu.blogspot.com/'><i class='fa fa-dribbble'/></a><a href='http://wajahilmu.blogspot.com/'><i class='fa fa-google-plus'/></a><a href='http://wajahilmu.blogspot.com/'><i class='fa fa-instagram'/></a><a href='http://wajahilmu.blogspot.com/'><i class='fa fa-linkedin'/></a><a href='http://wajahilmu.blogspot.com/'><i class='fa fa-flickr'/></a><a href='http://wajahilmu.blogspot.com/'><i class='fa fa-pinterest'/></a><a href='http://wajahilmu.blogspot.com/'><i class='fa fa-vimeo-square'/></a></div></div>
CSS
div.head-bg:before {
content: "";
position: absolute;
top: 0;
right: 0;
z-index: 40;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #fff #eee #fff #fff;
background: #658E15;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.08), -1px 1px 1px rgba(0,0,0,0.08);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.08), -1px 1px 1px rgba(0,0,0,0.08);
box-shadow: 0 1px 1px rgba(0,0,0,0.08), -1px 1px 1px rgba(0,0,0,0.08);
display: block;
width: 0;
}
.widget.widget-about{padding: 0px;
background: #fff;
margin-bottom: 30px;}.widget.widget-about .head-bg{position:relative;background-color:#47C2DC;height:90px;background-repeat:no-repeat;background-position:center center;-webkit-background-size:cover !important;-moz-background-size:cover !important;-o-background-size:cover !important;background-size:cover !important}.widget.widget-about .head-bg .my-pic{position:absolute;bottom:-20px;left:30px;border-radius:50%;overflow:hidden;background-color:#fff;border:5px
solid #fff}.widget.widget-about .head-bg .my-pic
img{height:80px;width:80px}.widget.widget-about .head-bg .my-data{padding-left:130px;padding-top:46px;color:#fff}.widget.widget-about .head-bg .my-data
span{display:block;letter-spacing:1px;text-transform:uppercase}.widget.widget-about .head-bg .my-data .my-name{font-size:14px;line-height:16px}.widget.widget-about .head-bg .my-data .my-job{font-size:10px}.widget.widget-about .my-words{padding:22px
25px 8px 25px;font-size:13px;line-height:21px}
.widget.widget-about .social-icon{margin-top:6px;text-align:center;border-top:1px solid #eee;padding:8px
25px 8px 25px}.widget.widget-about .social-icon
a{display:inline-block;margin-right:6px;height:24px;width:24px;color:#fff;border-radius:2px;text-align:center;font-size:14px;background-color:#ddd;transition:background-color 0.2s ease-in-out;-moz-transition:background-color 0.2s ease-in-out;-webkit-transition:background-color 0.2s ease-in-out;-o-transition:background-color ease-in-out}.widget.widget-about .social-icon...