JSFiddle - React, Tailwind, and code Playground

HTML

<table class="resizer">
    <tr>
        <td class="handle"></td>
        <td class="handle topedge"></td>
        <td class="handle"></td>
    </tr>
    <tr>
        <td class="handle leftedge"></td>
        <td>&nbsp;</td>
        <td class="handle rightedge"></td>
    </tr>
    <tr>
        <td class="handle"></td>
        <td class="handle bottomedge"></td>
        <td class="handle"></td>
    </tr>
</table>

CSS

.resizer {
    background-color: #ddd;
    top: 20px;
    left: 40px;
    width: 200px;
    height: 140px;
}

.resizer td{
    background: yellow;
}
.resizer .handle {
    background-color: #500;
}

.resizer .topedge {
    height: 2px;
    cursor: n-resize;
}

.resizer .leftedge {
    width: 2px;
    cursor: w-resize;
}

.resizer .rightedge {
    width: 2px;
    cursor: e-resize;
}

.resizer .bottomedge {
    height: 2px;
    cursor: s-resize;
}