JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table">
    <tbody>
        <tr>
            <td> 07/08/12 11:08 AM</td>
            <td>Voicemail Transcription A328413</td>
            <td>IN PROGRESS</td>
            <td>NA</td>
            <td>NA</td>
        </tr>
        <tr>
            <td>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>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>06/24/12 10:15 AM</td>
            <td>Voicemail Transcription A328413</td>
            <td>ACCEPTED</td>
            <td>100</td>
            <td>$.046</td>
        </tr>
        <tr>
            <td>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>

CSS

body {margin-top: 20px;}
table {
    
    background: #F8F8F8;
    color: #666;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    
    margin: 0 auto;
    border-collapse: collapse;
    border-spacing: 0;
    line-height: 1;
    position: relative;
    width: 600px;
}



table tr:hover td:first-child:before {
    content: '';
    position: absolute;
    left: 0px;
    margin-top: -10px;
    height: 31px;
    width: 100%;
    border: 1px solid #47a9e1;
    box-shadow: 0 0 4px #47a9e1;
    pointer-events: none;
    
    
}
table tr:hover {
   background: #d1e9f7; 
   
}
table tr {
     border: 1px solid #999;
    
}
table td, table th {
    padding: 10px;
}