JSFiddle - React, Tailwind, and code Playground

Profile Avatar

by Jennifer Perrin

HTML

<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200"/>

<div class="avatar details-avatar">
    <a href="http://jenniferperrin.com"><img src="http://jenniferperrin.com/image/jennifer-perrin.jpg" alt="user profile image"></a>
</div>
<h1 class="details-title">Title</h1>
<div class="details-meta">by <a href="http://jenniferperrin.com">Jennifer Perrin</a> on Date</div>

CSS

body { margin: 40px; }

.avatar {
    float: left;
    margin-right: 10px;
}
.avatar img {
    border-radius: 5px 5px 5px 5px;
}

/* ------------------------- */
.details-title {
    margin: 0 0 3px;
}
h1.details-title {
    color: #444;
    font-size: 32px;
    font-weight: 400;
    font-family: 'Yanone Kaffeesatz';
}
.details-avatar img {
    height: 60px;
    width: 60px;
}
.details-meta {
    color: #999999;
    font-size: 11px;
    letter-spacing: .05em;
    margin: 0 0 15px;
    font-family: 'Yanone Kaffeesatz';
}
.avatar img {
    border-radius: 5px 5px 5px 5px;
}
* {
    -moz-box-sizing: border-box;
    margin: 0;
    padding: 0;
}