JSFiddle - React, Tailwind, and code Playground

by Emile

HTML

<div class="comment">
    <div class="author">Bob</div> <div class="date" title="Permalink goes here">24 May 2011 05:31:52PM</div>
    <div class="message">This is the content of the comment, as usual; the things in brackets at the bottom right should be nice little icons in a square, but hey, this'll do for now.</div>
    
    <div class="karma">
        <span class="selected">Vote up</span>&nbsp;&nbsp;&nbsp;<span>Vote down</span> 
    </div>
    
    
    <div class="agreement" title="3 agree, 10 disagree">
        [√] <span class="agreecount">x3</span>
        <span class="selected">[x]</span> <span class="agreecount">x10</span>
    </div>
</div>

CSS

.comment {
    position: absolute;
    left: 10px;
    top: 20px;
    border: solid;
    border-width: 1px;
    border-color: darkgrey;
    width: 450px;
}

.author {
    color: darkgreen;
    cursor: pointer;
    text-decoration:underline;
     padding-left:10px;
    padding-top:10px;
}

.date {
    position: absolute;
    left: 60px;
    top: 14px;
    color: darkgreen;
    cursor: pointer;
    text-decoration:underline;
    font-size: 10px;
}

.message {
    padding-top:25px;
    padding-bottom:40px;    
     padding-left:10px;
}

.karma {
     position: absolute;
     left: 10px;
    bottom: 10px;
 }

.karma > span {
    color: darkgreen;
     font-size: 12px;
     text-decoration:underline;
 }

.agreement {
    color: darkgreen;
    font-size: 11px;
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.agreecount {
    font-style:italic;
}

.selected {
    font-size: 12px;
    font-weight:bold;
}