JSFiddle - React, Tailwind, and code Playground

by Pankaj Kargirwar

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<table>
    <tr>
        <td>
<span class='fa fa-check-circle-o task-1'></span>
            </td>
        <td>
<span class='line'>---------</span>
        </td>
        <td>
<span class='fa fa-check-circle-o task-2'></span>
        </td>
        <td>
<span class='line'>---------</span>
        </td>
                <td>
<span class='fa fa-clock-o task-3'></span>
        </td>

    </tr>
</table>

CSS

[class*=task-] {
    font-size:32px;
    color:black;
}
.td {
    vertical-align:middle;
    font-weight:bold;
    padding:0;    
}

.task-2 {
    color:orange;
}

.task-3 {
    color:red;
}
tr {
    background:#eeeeee;
}

table {
    border-collapse:collapse;
}