JSFiddle - React, Tailwind, and code Playground

HTML

<div id='yaziİciBilgi'>
	<h3>Deneme Bu Bir BlogDede Denemesidir :D</h3>
    <div class='kategori'><a href="#">Bedava-Sitem </a></div>
	<br/><br/>
	<div class='tarih'>12 Ağustos 2013 Pazartesi</div>
	<br/><br/>
    <div class='yorum'><a href="#">2 yorum</a></div>
</div>

CSS

#yaziİciBilgi{
width:auto;
height:auto;
padding:3px;
border:1px solid #aaa;/*Kenarlık boyutu, tipi ve rengi*/
display:inline-block;
position:fixed;
top:10%/*Yukarıya uzaklığı*/;
right:1%;/*Sağa uzaklığı. Sola hizalamak için değeri left yapın*/
font:13px Arial;/*Yazı boyutu ve adı*/
background:#fff/*Arkaplan rengi*/
}
#yaziİciBilgi a{
color:#aaa/*Linklerin rengi*/
}
#yaziİciBilgi a:hover{
color:#000/*Linklerin üzerinde gelince alacağı renk*/
}
#yaziİciBilgi h3{
color:#5d98d8;/*Başlık rengi*/
border-bottom:1px dotted #aaa;/*Başlığın altındaki çizginin boyutu tipi ve rengi*/
font:bold 14px Arial;/*Yazı kalınlığı, boyutu ve adı*/
text-align:center;/*Başlığı ortalama*/
padding:3px 0;
margin:0
}
#yaziİciBilgi .kategori,#yaziİciBilgi .tarih,#yaziİciBilgi .yorum{
height:20px;
width:20px;
padding-left:24px;
float:left;
font-size:13px;
margin:3px 0;
width:100%
}
#yaziİciBilgi .kategori{
background:url(https://lh3.googleusercontent.com/-sW75ut86b3M/UgjZV47n9mI/AAAAAAAAHJY/k0bOwW8Pcu0/s62/yaziBilgisi.png) no-repeat center left;
background-position:0 0
}
#yaziİciBilgi .tarih{
background:url(https://lh3.googleusercontent.com/-sW75ut86b3M/UgjZV47n9mI/AAAAAAAAHJY/k0bOwW8Pcu0/s62/yaziBilgisi.png) no-repeat center left;
background-position:0 -21px
}
#yaziİciBilgi .yorum{
background:url(https://lh3.googleusercontent.com/-sW75ut86b3M/UgjZV47n9mI/AAAAAAAAHJY/k0bOwW8Pcu0/s62/yaziBilgisi.png) no-repeat center left;
background-position:0 -42px
}