JSFiddle - React, Tailwind, and code Playground

by kizu

HTML

<table class="test">
    <tr>
        <td class="index">1</td>
        <td class="distance">1.23</td>
        <td>
        <p>Cogito ergo sum.</p>
        <p>Cogito ergo sum. Cogito ergo sum.</p>
        </td>
        <td class="goTo"><a href="#" title="Cogito" ><img src="img/icons/arrowRightBlack.png" alt="Cogito" /></a></td>
    </tr>
    <tr class="grey">
        <td class="index">2</td>
        <td class="distance">1.23</td>
        <td>
        <p>Cogito ergo sum.</p>
        <p>Cogito ergo sum. Cogito ergo sum.</p>
        </td>
        <td class="goTo"><a href="#" title="Cogito" ><img src="img/icons/arrowRightBlack.png" alt="Cogito" /></a></td>
    </tr>
    <tr>
        <td class="index">3</td>
        <td class="distance">1.23</td>
        <td>
        <p>Cogito ergo sum.</p>
        <p>Cogito ergo sum. Cogito ergo sum.</p>
        </td>
        <td class="goTo"><a href="#" title="Cogito" ><img src="img/icons/arrowRightBlack.png" alt="Cogito" /></a></td>
    </tr>
</table>

CSS

.test{
    width:100%;
    height:auto;
    color:#1c1c1c;
}
.test tr{
    background:#cccccc;
    opacity:0.8;
    -moz-transform: rotate(0);
}
.test tr:hover{
    opacity:1;
}
.test tr.grey{
    background:#666666;
}
.test td{
    padding:2px;
    vertical-align:middle;
}
.test td.index{
    color:#fff;
    vertical-align:top;
}
.test td.distance{
    padding:0 5px;
    color:#cf0404;
    font-size:1.5em;
    text-align:center;
}
.test td.goTo{
    width:16px; /* = width of arrowRight.png */
    text-align:right;
}