JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tbody>
        <tr>
            <!-- The current Image Sources are just PLACEHOLDERS. It is not the final img sources path. -->
            <td>
                <img src="http://opensource.org/files/osi_keyhole_100X100_90ppi.png" width="100px" height="100px">
                <div class="rndSpacing1">The Test</div>
            </td>
            <td>
                <img src="http://opensource.org/files/osi_keyhole_100X100_90ppi.png" width="100px" height="100px">
                <div class="rndSpacing2">Testtest Testtesttesttest</div>
            </td>
            <td>
                <img src="http://opensource.org/files/osi_keyhole_100X100_90ppi.png" width="100px" height="100px">
                <div class="rndSpacing1">TESt</div>
            </td>
            <td>
                <img src="http://opensource.org/files/osi_keyhole_100X100_90ppi.png" width="100px" height="100px">
                <div class="rndSpacing1">Testt TesttTest</div>
            </td>
        </tr>
        <tr>
            <td>
                <img src="http://opensource.org/files/osi_keyhole_100X100_90ppi.png" width="100px" height="100px">
                <div class="rndSpacing2">TestTest Testtest</div>
            </td>
            <td>
                <img src="http://opensource.org/files/osi_keyhole_100X100_90ppi.png" width="100px" height="100px">
                <div class="rndSpacing2">Test Testtest tests</div>
            </td>
            <td>
                <img src="http://opensource.org/files/osi_keyhole_100X100_90ppi.png" width="100px" height="100px">
                <div class="rndSpacing2">testtest testtest</div>
            </td>
            <td>
                <img src="http://opensource.org/files/osi_keyhole_100X100_90ppi.png" width="100px" height="100px">
                <div class="rndSpacing1">Testtesttesttest</div>
            </td>
        </tr>
    </tbody>
</table>

CSS

table, th, td {
    border: 1px solid #8a9398;
    border-collapse: collapse;
    box-shadow: inset 1px 1px 0px 1px white;
    table-layout: fixed;
}
td {
    text-align: center;
    width: 148px;
    height: 180px;
    color: #48515b;
    cursor: pointer;
}
td:hover {
    -ms-transition-duration: 0.2s;
    -ms-transform: scale(1.1);
    -webkit-transition-duration: 0.2s;
    -webkit-transform: scale(1.1);
    box-shadow: 0 0 0 0;
}
td:active {
    -ms-transition-duration: 0.1s;
    -ms-transform: scale(0.95);
    -webkit-transition-duration: 0.1s;
    -webkit-transform: scale(0.95);
    box-shadow: 0 0 0 0;
}