JSFiddle - React, Tailwind, and code Playground

by Nathan Osman

HTML

<div id="image">
</div>

<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></td>
        <td class="handle rightedge"></td>
    </tr>
    <tr>
        <td class="handle"></td>
        <td class="handle bottomedge"></td>
        <td class="handle"></td>
    </tr>
</table>

CSS

#image {
    position: relative;
    background-color: #eee;
    width: 280px;
    height: 180px;
    border: 1px solid #aaa;
}

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

.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;
}