JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<span class='resizeable'>test</span>

CSS

.resizeable{
    border:dashed black 1px;
}

.resizeborder > [name=top]{
    cursor:ns-resize;
    height:5px;
}
.resizeborder > [name=topright]{
    cursor:nesw-resize;
    height:10px;
    width:10px;
}
.resizeborder > [name=topleft]{
    cursor:nwse-resize;    height:10px;
    width:10px;
}
.resizeborder > [name=bottom]{
    cursor:ns-resize;
     height:5px;
    width:100%;
}
.resizeborder > [name=bottomright]{
    cursor:nwse-resize;    height:10px;
    width:10px;
}
.resizeborder > [name=bottomleft]{
    cursor:nesw-resize;    height:10px;
    width:10px;
}

.resizeborder > [name=right]{
    cursor:ew-resize;
     width:5px;
}
.resizeborder > [name=left]{
    cursor:ew-resize;
    width:5px;
    height:
}