JSFiddle - React, Tailwind, and code Playground

by Rizki Maulidan

HTML

<div class='Ib-authorboxs'>
<div class='container'> 
<div><ul class='icon'>
<li><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onClick='window.open (this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='SHARE WITH GOOGLE PLUS'><img alt='gplus' src='http://4.bp.blogspot.com/-uqdkHzEv0ww/UrFJu22Ur2I/AAAAAAAACGY/go2sx_-GBN0/s1600/gplus5.png' title='SHARE WITH GOOGLE PLUS'/></a></li>
<li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' onClick='window.open (this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='SHARE WITH FACEBOOK'><img alt='facebook' src='http://2.bp.blogspot.com/-l1SRbPTHAsQ/UrFJyc_5FAI/AAAAAAAACGo/gcapAexj3_A/s1600/fb5.png' title='SHARE WITH FACEBOOK'/></a></li>
<li><a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' onClick='window.open (this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='twitter'><img alt='twitter' src='http://3.bp.blogspot.com/--LWudJfcADA/UrFJ1T3u6nI/AAAAAAAACGw/4VCrwmXhefA/s1600/twit5.png' title='SHARE WITH TWITTER'/></a></li>
<li><a href='LINK RSS' rel='nofollow' target='_blank' title='SHARE WITH TWITTER'><img alt='rss' src='http://4.bp.blogspot.com/-rmOQYKSH5MM/UrFJv-vmyEI/AAAAAAAACGg/-xUU2XcONNQ/s1600/rss5.png' title='RSS'/></a></li></ul>
</div>
<div style='margin-bottom:-20px;'>Anda sedang membaca artikel tentang,<br/> <b><a expr:href='data:post.url' expr:title='data:post.title' style='color: rgb(255, 255, 0);font-size: 11px;font-family: arial;text-align: center;'><data:post.title/></a></b> <br/> Jika anda tertarik dengan artikel ini, silahkan Anda COPAS di situs anda atau sebar luaskan artikel ini, <B>INGAT..!</B> jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya...!!!</div> 
<span...

CSS

.Ib-authorboxs {width: 100%; margin:5px auto; }
.Ib-authorboxs .container{padding: 20px;border-radius: 5px;background-color: #376A7B;}
.Ib-authorboxs .container {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #fff;
line-height: 20px;
position: relative;
}
.Ib-authorboxs .container:after,
.Ib-authorboxs .container:before {
top: 100%;
border: solid transparent;
content: &quot; &quot;;
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.Ib-authorboxs .container:after {
border-top-color: #376A7B;
border-width: 20px;
left: 65%;
margin-left: -10px;
}
.Ib-authorboxs .container:before {
border-top-color: rgba(0,0,0,0.01);
border-width: 11px;
left: 65%;
margin-left: -11px;
}
.Ib-authorboxs .icon {width: 100%;margin:0 auto;padding:0 10px;cursor:pointer;}
.Ib-authorboxs .icon ul{margin:0 auto;} 
.Ib-authorboxs .icon li {display: inline;float: left;padding:0 10px;} 
.Ib-authorboxs .BDRS-textarea {
background-color:#ECFDF9;
border:dashed #666 1px;
width: 100%;
margin:5px auto;
}
.Ib-authorboxs .owner {
text-align: right;
padding: 20px 100px 20px 20px;
position: relative;
margin:5px 20px 0 0;
}
.Ib-authorboxs .owner-image-profil {
display: block;
width: 70px;
height: 70px;
border: 5px solid #fff;
border-radius: 50%;
background: url('http://3.bp.blogspot.com/-AsnKz0x8BpQ/UoensPK6VYI/AAAAAAAACCo/xghZjQIgXuE/s1600/s.jpg') no-repeat center center;
position: absolute;
right: 10px;
bottom:0;
box-shadow:
inset 1px 1px 4px rgba(0,0,0,0.5),
0 2px 3px rgba(0,0,0,0.6);
}
.Ib-authorboxs .owner-blog-name{
font-family: Georgia;
font-weight: bold;
font-size: 24px;
color: #FF0000;
text-shadow: 2px 1px 1px rgb(153, 153, 153);
font-style: italic;
margin: 0 0 10px 0;
}
.Ib-authorboxs .name{font-family: Verdana;color: #0000FF;font-size: 12px;text-decoration: none;}
.Ib-authorboxs .name:hover{color: #4F0000;text-shadow: 0 1px 1px rgba(255,255,255,0.7);text-decoration:underline;}
.keyword {
height: 20px;
width: 15%;
text-align: left;
float: right;
margin:...