JSFiddle - React, Tailwind, and code Playground

Discussion Styles

by Jennifer Perrin

HTML

<div class="discussion dis-group">
    <ul class="media-primary">
        <li class="avatar col-gutters pad-top">
            <a class="media-image" href="#">
                <img src="http://jenperrin.com/envato/frameworx/avatars/admin.png" alt="Shay" />
            </a>
            <div class="media-body">
                <strong class="media-count box-offset">Admin</strong>
                <h5>Shay <span class="text-subtle dis-date">posted 22 hours ago</span></h5>
                <p>Overly specific selectors break the cascade. The true key, and beauty, to CSS is keeping the specificity as low as possible. Overly specific selectors break the cascade. The true key, and beauty, to CSS is keeping the specificity as low as possible. Overly specific selectors break the cascade. The true key, and beauty, to CSS is keeping the specificity as low as possible.</p>
            </div>
        </li>
        
        <li class="avatar col-gutters pad-top">
            <a class="media-image" href="#">
                <img src="http://jenperrin.com/envato/frameworx/avatars/generic.png" alt="Carolyn" />
            </a>
            <div class="media-body">
                 <h5>Carolyn <span class="text-subtle dis-date">posted 1 day ago</span></h5>
                <p>Trying to figure out accommodations for SXSW Interactive. Anyone have an extra spot where they&#8217;re staying?</p>
            </div>
        </li>
    </ul>
</div>

CSS

/* Clearfix */
 .dis-group:before, .dis-group:after {
    content:"";
    display: table;
}
.dis-group:after {
    clear: both;
}
/* Box offset */
 .box-offset {
    background: #fff;
    border: 1px solid #d4d4d4;
}
/* Container */
 .discussion {
    margin: 0 auto;
    padding: 20px;
    max-width: 980px;
}

.col-gutters {
    padding-left: 20px;
    padding-right: 20px;
}
.col-baselines {
    padding-bottom: 20px;
    padding-top: 20px;
}
.col-box {
    padding: 20px;
}

.pad-top {
    padding-top: 20px;
}
/* Typography
================================================== */
.media-body h5, .media-body p {
    margin: 0 0 20px 0;
}
.media-body h5, .media-body strong {
    font-weight: 600;
}
/* Sizes */
.media-body h5, .h-related {
    font-size: 14px;
}
.dis-date {
    margin-left: 10px;
    font-size: 12px;
}
/* Colors */

.media-body h5 {
    color: #333;
}
/* Offset */
 .text-subtle {
    color: #999;
    font-weight: normal;
}

.media-body img {
    border: 0;
}

.discussion ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

 .avatar, .media-body {
    overflow: hidden;
}
.media-primary .media-image {
    float: right;
    margin: 0 0 20px 20px;
}
.media-primary .media-image-alt {
    float: left;
    margin: 0 20px 20px 0;
}
.media-image img {
    display: block;
}
.media-count {
    color: #999;
    float: right;
    font-size: 10px;
    line-height: 1;
    padding: 3px 5px;
}

.media-primary {
    border-bottom: 1px solid #d4d4d4;
}
.media-primary .avatar {
    border-top: 1px solid #d4d4d4;
}