JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<table>
    <tr>
        <td> first </td>
        <td> second </td>
        <td> third </td>
    </tr>
    <tr class="odd">
        <td> first </td>
        <td> second </td>
        <td> third </td>
    </tr>
    <tr>
        <td> first </td>
        <td> second </td>
        <td> third </td>
    </tr>
    <tr class="odd">
        <td> first </td>
        <td> second </td>
        <td> third </td>
    </tr>
</table>

CSS

table {
    width: 100%;
    margin: 40px;
}
table .odd {
    background: rgba(0,0,0,.1);
}

td {
    padding: 0;
    -moz-transition: padding 1s linear;
    -ms-transition: padding 1s linear;
    -o-transition: padding 1s linear;
    -webkit-transition: padding 1s linear;
    transition: padding 1s linear;
}

tr:hover td {
    padding: 1em 0;
    -moz-transition: padding 1s linear;
    -ms-transition: padding 1s linear;
    -o-transition: padding 1s linear;
    -webkit-transition: padding 1s linear;
    transition: padding 1s linear;
}