JSFiddle - React, Tailwind, and code Playground

by Cath_kb

HTML

<div class="wrapper">
<div id="work_list_container">
<table id="work_list" class="table">
    <tbody>
        <tr>
            <th><i></i>Submitted</th>
            <th class="job_title">Job Title</th>
            <th class="status">Status</th>
            <th class="raiting">Rating</th>
            <th class="Earnings">Earnings</th>
        </tr>
        <tr>
            <td><i></i>07/08/12 11:08 AM</td>
            <td>Voicemail Transcription A328413</td>
            <td>IN PROGRESS</td>
            <td>NA</td>
            <td>NA</td>
        </tr>
        <tr class="active">
            <td><i></i>06/29/12 06:49 PM</td>
            <td>Voicemail Transcription A328413</td>
            <td>ACCEPTED</td>
            <td>98</td>
            <td>$0.97</td>
        </tr>
        <tr>
            <td><i></i>06/27/12 06:48 PM</td>
            <td>Voicemail Transcription A328413</td>
            <td>ACCEPTED</td>
            <td>90</td>
            <td>$1.72</td>
        </tr>
        <tr>
            <td><i></i>06/24/12 10:15 AM</td>
            <td>Voicemail Transcription A328413</td>
            <td>ACCEPTED</td>
            <td>100</td>
            <td>$.046</td>
        </tr>
        <tr>
            <td><i></i>06/21/12 02:32 AM</td>
            <td>Voicemail Transcription A328413</td>
            <td>ACCEPTED</td>
            <td>95</td>
            <td>$2.25</td>
        </tr>
    </tbody>
</table><!--#work_list-->
</div><!--#work_list_container-->
</div><!--.wrapper-->

CSS

table {
    border-collapse: collapse;
    border-spacing: 0;
    line-height: 1;
}
.wrapper {
    float: left;
    position: relative;
    margin-left: 10px;
}
#work_list_container {
    background: #F8F8F8;
    color: #666;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    width: 606px;
    margin: 0 auto;
}
#work_list {
    width: 100%;
}
#work_list th {
    background: #ccc;
    border-left: 1px solid #fff;
    text-transform: uppercase;
    font-weight: normal;
}

#work_list th:first-child {
    border-left: none;
}

#work_list tr {
    position: relative;
    cursor: pointer;
}
#work_list tr:first-child {
    background: #ccc;
}
#work_list tr:nth-child(even) {
    background: #f0f0f0;
}
#work_list td, #work_list th {
    padding: 10px;
}
#work_list tr td:first-child i {
    position: absolute;
    width: 606px;
    margin: -10px 0 0 -10px;
    height: 31px;
}
#work_list tr.active td:first-child i {
    background: #000 url('http://jsfiddle.net/img/logo.png') center no-repeat; /*for old browsers*/
    background: rgba(0,0,0,.7) url('http://jsfiddle.net/img/logo.png') center no-repeat;
    z-index: 100;
}