JSFiddle - React, Tailwind, and code Playground

by Jeff

HTML

<div class="forum-block">
    <div class="forum-cat">Category</div>
    <div class="forum-head">
        
    </div>
    <div class="forum-row">
         <div class="forum-details">
            <div class="forum-details-last">
                <a href="#">Thread Title</a><br>
                by Username<br>
                On 10/16/14 at 8:06pm
            </div>
            <div class="forum-details-block">Threads: 5</div>
            <div class="forum-details-block">Posts: 35</div>
            <div class="forum-details-block">Viewers: 67</div>
        </div>
        <div class="forum-icon"><img src=""></div>
        <div class="forum-label">
            News
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel diam est. Vivamus turpis nulla, mattis ac posuere eu, tempus a magna. Mauris scelerisque egestas mi eget fermentum. Sed tincidunt enim quis volutpat laoreet. Aliquam ac arcu a quam commodo bibendum. In commodo dolor et sem pretium venenatis. Etiam ullamcorper mauris dui, nec pharetra justo lobortis et. Vestibulum consectetur bibendum rhoncus. Donec et laoreet ante. Donec a tincidunt ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sit amet orci mi. Etiam vel tellus risus. Proin non augue sed urna gravida venenatis. Sed consectetur a nisi ut porta. Aliquam rhoncus enim in diam condimentum eleifend.
            </div>
    </div>
    <div class="forum-row">Category</div>
    <div class="forum-row">Category</div>
    <div class="forum-foot"></div>
</div>

CSS

body{
    background:#F0F0F0;
}

.forum-block{
    box-shadow:1px 1px 2px rgba(0,0,0,0.3);
    border-radius:6px;
}

.forum-cat{
    padding:8px;
    font-weight:bold;
    color:#FFF;
    background:#2EA8E6;
    border-radius:6px 6px 0px 0px;
}
.forum-head{
    padding:4px;
    font-weight:bold;
    color:#FFF;
    background:#888;
    border:1px solid #777
}
.forum-row{
    background:#FFF;
    border-right:1px solid #E0E0E0;
    border-bottom:1px solid #E0E0E0;
    border-left:1px solid #E0E0E0;
}
.forum-row:after{
    display:block;
    content:"";
    clear:both;
}
.forum-icon{
    width:9%;
    float:left;
    vertical-align:middle;
}
.forum-icon img{
    height:24px;
    width:24px;
    display:inline-block;
}
.forum-icon:before{
    height:100%;
    width:0px;
    content:"";
    display:inline-block;
}
.forum-label{
    padding:8px;
    float:left;
    width:50%;
}
.forum-details{
    width:41%;
    float:right;
}
.forum-details:after{
    display:block;
    content:"";
    clear:both;
}
.forum-details-last{
    padding:4px 8px;
    background:#E0E0E0;
}
.forum-details-block{
    padding:4px 8px;
    float:left;
    background:#FFF;
    border-left:1px solid #E0E0E0;
}
.forum-foot{
    padding:8px;
    background:#888;
    border:1px solid #777;
    border-radius:0px 0px 6px 6px;
}