JSFiddle - React, Tailwind, and code Playground

HTML

<div class=box>
    <div class="user">
        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Pablo_picasso_1.jpg/192px-Pablo_picasso_1.jpg">
        <p>Usuario</p>
        <p class="date">March 23</p>
        <div class="clear"></div>
    </div>
    <div class="body">        
        <p>I'm always looking...</p>
        <div class="link">
            <div class="foto">
                <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Pablo_picasso_1.jpg/192px-Pablo_picasso_1.jpg">
            </div>
            <div class="message">
                <h1><a href="#">Link</a></h1>
                Pablo ruiz picasso
            </div>
                <div class="clear"></div>
        </div>
        
    </div>
    
    
    
</div>

CSS

.box {
    border: 1px solid #D0D6E6;
    padding: 10px;
}

.box .user {
    border-bottom: 1px solid  #D0D6E6;
}

.box .user p {
    line-height: 12px;
    font-size: 12px;
}

.box .user img {
    width: 30px;
    height: 30px;
    float: left;
    margin-right: 10px;
}

.box .user .date {
    color: #B9B9B9;
    line-height: 8px;
    font-size: 8px;
}

.box .body .link {
    background-color: #F6F7F9;
    border: 1px solid #D0D6E6;
}
.box .body .link .foto {
    float: left;
    width: 25%;
}
.box .body .link .foto img {
    width: 100%;
    vertical-align: bottom
}
.box .body .link .message {
    float: right;
    width: 73%;
}
.box .body .link .message h1 {
    margin: 8px 0;
    font-size: 1em;
    line-height: 1em;
}
.box .body .link .message h1 a {
    text-decoration: none;
}
.clear {
    clear:both;
}