JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>
            <span class="sit-in-the-corner">1</span>
            <img src="http://fiwishop.com/feedback/images/2-up-icon-blk.png" />
        </td>
        <td>
            <span class="sit-in-the-corner">2</span>
            Create Project
        </td>
    </tr>
    <tr>
        <td>
            <span class="sit-in-the-corner">3</span>
            Add Client Email
        </td>
        <td>
            <span class="sit-in-the-corner">4</span>
            Profit
        </td>
    </tr>
</table>

CSS

table {
    width: 600px;    
    border-spacing: 20px;   
}

table td {
    height: 200px;
    width: 300px;
    border: 2px dotted #000;
    text-align: center;
}

.sit-in-the-corner {
    float: left;
    margin-left: 5px;
    margin-top: -85px;
    color: #556655;
}

table td:hover, table td:hover span {
      color: #aa5650;
}

table td:hover{
      border: 2px dotted #aa5650;   
}

JavaScript

$("table td img").hover(function() {                
                 this.src = this.src.replace('-grey.png', '-blk.png');
                }, function() {
                 this.src = this.src.replace('-blk.png', '-grey.png');                              
    });