JSFiddle - React, Tailwind, and code Playground

by simucal

HTML

<html>
    <body>
        <div class="lesson-comments">
            <table class="comments">
                <tbody>
                    <tr class="comment">
                        <td class="comment-rating">
                            <a class="vote" href="#"></a>
                            <div class="vote-count">21</div>
                        </td>
                        <td class="comment-body">
                            <span class="text">This is text description comment that has more than one line. This is used for testing comments display section</span> - <a href="/users/0">shivaram1190</a> <abbr class="timeago" style="color:Gray;" title="9/21/2011 6:27 AM">2 days ago</abbr>       
                        </td>
                        <td class="comment-actions">
                            <div class="flag">
                                <a href="#"></a>
                            </div>
                        </td>                     
                    </tr>
                    <tr class="comment">
                        <td class="comment-rating">
                            <a class="vote" href="#"></a>
                            <div class="vote-count">21</div>
                        </td>
                        <td class="comment-body">
                            <span class="text">Unicode letter, and then followed by a number of those characters, digits, connector punctuation, combining marks and zero-width joiner or non-joiner. It would seem that IE goes a bit beyond that, since it allows the symbols in the identifiers, but I haven't been able to find a source about exactly what they do allow.</span> - <a href="/users/0">shivaram1190</a> <abbr class="timeago" style="color:Gray;" title="9/21/2011 6:27 AM">2 days ago</abbr>       
                        </td>
                        <td class="comment-actions">
                            <div class="flag">
                                <a href="#"></a>
                        ...

CSS

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    color: #333;
}

.lesson-comments
{
    
}

a
{
   color: #07C;
}

.comments
{
    width: 100%;

}

.comments .comment
{
    padding: 5px 0 5px 0;
    font-size: 12px;
}

.comments .comment:hover
{
    background: #F0F0F0;
}

.comments .comment td 
{
    padding: 5px 0;
    line-height: 15px;
    border-bottom: 1px solid #DDD;
}

.comments .comment .comment-rating
{
    width:15px;
    padding-left: 3px;
    vertical-align: top;
}

.comments .comment .comment-rating .vote
{
    display: block;
    width:14px;
    height:14px;
    background: url('http://bytecourse.com/Content/img/vote-sprite.png') 0 -459px;
}

.comments .comment .comment-rating .vote-count
{
    text-align:center;
    font-size:12px;
    padding-top: 3px;
    font-weight:bold;
    color:gray;
}

.comments .comment .comment-rating .vote:hover
{
    background-position: 0 -432px;
}

.comments .comment .comment-body
{
    vertical-align: top;
    padding-left: 7px;
    padding-right: 7px;
}


.comments .comment .comment-body .time-info
{
    padding-left: 5px;
}

.comments .comment .comment-actions 
{
    vertical-align: top;
    padding-right: 3px;
    width: 17px;
}

.comments .comment:hover .comment-actions .flag
{
    display:block;
}

.comments .comment .comment-actions .flag
{
    display:none;
}

.comments .comment .comment-actions .flag a
{
    display: block;
    width:14px;
    height:14px;
    background: url('http://bytecourse.com/Content/img/vote-sprite.png') 0 -529px;
}

.comments .comment .comment-actions .flag a:hover
{
    background-position: 0 -504px;
}