JSFiddle - React, Tailwind, and code Playground

by diaryfakta

HTML

<div class='status'>
<span class='profile'>
<img src='http://profile.ak.fbcdn.net/hprofile-ak-ash4/371558_100000636711769_1249555200_q.jpg'/>
<span class='beranda'>
<span class='nama'><a href='#'>Fahmy Athailla Orang Yang Paling Ganteng</a></span><br/>
<span class='tahun'>Sekitar satu Abad yang Lalu</span>
</span></span>
<div class='facebook'>
<p>Belajar Cloning meski tidak melihat code tersebut...<br/>
Apakah begini masih tetap di bilang Cloning?...<br/>
Tolong berikan Komentar anda...</p>
<div class='bawah_status'>
<span class='suka'><img src='http://inu_47.mywapblog.com/files/facebook-like-icon.png'/></span><a href='#'>Harus Suka</a>
<span class='komentar'><a href='#'>Komentarin</a></span>
<span class='komentar'><a href='#'>Berhenti Mengikuti Kiriman</a></span>
<span class='komentar'><a href='#'>Promosikan</a></span>
</div>
</div>
</div>

CSS

body{
margin:50px;
background:#ddd;
}
.status{
background:#fff;
width:500px;
padding:10px;
border:solid 1px #999;
}
.facebook{
border-top:solid 1px #ddd;
padding-top:10px;
position:relative;
top:-10px;
}
.facebook p{
font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:12px;
color:#000;
line-height:17px;
position:relative;
top:-10px;
}
.nama{
font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:17px;
color:#000;
}
.status{
font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:11px;
}
.status a, .nama a{
color:#3b5998;
text-decoration:none;
}
.status a:hover, .nama a:hover{
text-decoration:underline;
}
.tahun{
font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:10px;
color:#555;
position:relative;
left:54px;
}
.beranda{
top:-25px;
left:5px;
position:relative;
}
.suka{
margin-right:5px;
position:relative;
top:1px;
}
.komentar{
margin-left:10px;
}
.bawah_status{
background:#ddd;
padding:5px;
width:98%;
height:auto;
}