JSFiddle - React, Tailwind, and code Playground

by Bhesh Gurung

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div style="width: 680px; margin: 0 auto; padding: 20px 0;">
    <table class="discrep">
        <tr>
            <td class="discrepstat">
                <div class="likecontainer">
                    <button type="button" class="btn btn-thumbs btn-thumbs-up fa fa-lg fa-thumbs-up"></button>
                    <span class="liketext">1230</span>
                </div>
                <div class="likecontainer">
                    <button type="button" class="btn  btn-thumbs btn-thumbs-down fa fa-lg fa-thumbs-down"></button>
                    <span class="liketext">1230</span>
                </div>
            </td>
            <td clas="replycontent">
                <div style="min-height: 50px;">SonarQube® software (previously called Sonar) is an open source quality management platform, dedicated to continuously analyze and measure technical quality, from project portfolio to method. If you wish to extend the SonarQube platform with open source plugins, have a look at our plugins forge.</div>
                <table width="100%">
                    <tr>
                        <td>
                            <div class="disrepcontrols">
                                <button type="button" class="btn btn-link" style="color: #666;">edit</button>
                                | <button type="button" class="btn btn-link" style="color: #666;">share</button>
                            </div>
                        </td>
                        <td style="width: 200px;">
                            <div style=" margin-right: 8px;">
                                <div style="margin-bottom: 5px; color: #666; font-size: 12px;">replied Aug 31 '15 at 12:00PM</div>
                                <div style="background-color: #E6EEF6; padding: 2px;">
       ...

CSS

table.discrep {
    width: 100%;
}

table.discrep td {
    border: 0px solid #eee;
    vertical-align: top;
}

table.discrep td.discrepstat {
    width: 100px;
    text-align: center;
    padding-top: 6px;
}

table.discrep td.discrepcontent {
    
}

div.likecontainer {
    text-align: center;
    border: 0px solid #CEF6CE;
    display: inline-block;
    padding: 0;
    border-radius: 3px;
    margin: 0 0 8px 0;
    
}

.liketext {
    display: inline-block;
    color: #585858;
    border: 2px solid #bbb;
    padding: 2px 7px;
    text-align: center;
    font-weight: 600;
    border-radius: 5px;
    height: 28px;
    width: 50px;
}

.btn {
    border-radius: 0;
    padding: 4px !important;
    margin: 0;
    background-color: #fff;
}

.btn-thumbs {
    padding: 0 !important
}

.btn-thumbs-up {
    color: #585858;
}

.btn-thumbs-down {
    color: #585858;
}

.btn-thumbs-up:hover {
    color: #04B404;
}

.btn-thumbs-down:hover {
    color: #DF0101;
}

div.disrepcontrols {
    border-top: 1px solid #999; 
    width: 100px; 
    margin-top: 12px;
}