JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>
            <span class="sit-in-the-corner">1</span>
            Add Client
        </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;
    width: 44px;
    height: 44px;
    float: left;
    margin-left: 15px;
    margin-top: -75px;
    font-size: 1.5em;
    font-style: bold;
    color: #e0e1e2;
    background: #bdbebf;
    border-radius: 22px;
    -moz-border-radius: 22px;
    -webkit-border-radius: 22px;
    -khtml-border-radius: 22px;
}

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

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