JSFiddle - React, Tailwind, and code Playground

by mstefanko

HTML

<div class="idea-board">
    <div class="idea-top">
        <div class="idea-title"><span>Title</span></div>       
    </div>
    <div class="idea-bottom">
        <div class="idea-submitter idea-row">
            <span>Christopher Clobus</span>
        </div>
        
        <div class="idea-description idea-row">
            <span>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem Ipsum</span>
        </div>
        
        <div class="idea-info idea-row">
            <span class="idea-promote-count">134</span>
            <span class="idea-comment-count">10</span>
            <div class="idea-is-fav">star</div>
        </div>
    </div>
</div>

CSS

.idea-board {
    background: #F7F7F7;
    width:220px;
    border-radius: 4px;
}

.idea-top {
    height:200px;
    border-bottom: 1px solid #ccc;
    background: URL('http://www.examiner.com/images/blog/wysiwyg/image/astronaut(4).jpg');
}
.idea-title {
    position: relative;
    top: 0;
    width: 100%;
    background: #000;
    opacity: .8;
    padding-top: 5px; 
    padding-bottom: 5px;
}

.idea-title span{color: #FFF; font-weight: bold; margin-left: 10px; font-size: 14px;}

.idea-bottom {
    padding:10px;
}

.idea-row {
    display:inline-block;
}

.idea-submitter { margin-bottom: 10px;}
.idea-description { margin-bottom: 10px;}

.idea-description { display:block;font-size:10px;}
.idea-is-fav { float:right;}
.idea-info { width: 100%;}
.idea-info span {margin-right:15px;}