JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <ul id="unlNotification" class="ui-resizable" style="height: 127.7px;">
        <li>qwe</li>
        <li>qwe</li>
        <li>qwe</li>
        <li>qwe</li>
        <li>qwe</li>
        <li>qwe</li>
        <li>qwe</li>
        <li>qwe</li>
        <li>qwe</li>
        <li>qwe</li>
        <li>qwe</li>
        <li>qwe</li>
        <li>qwe</li>
        <li>qwe</li>
        <li>qwe</li>
        <li>qwe</li>
        <li>qwe</li>
        <li>qwe</li>
        <li>qwe</li>
        <li>qwe</li>
        <li>qwe</li>
        <li>qwe</li>
        <li>qwe</li>
        <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div>
    </ul>
</div>

CSS

.ui-icon {
    background-color: black;
    width: 20px;
    height: 20px;
}
#container, .ui-resizable {
    position: relative;
}
.ui-resizable {
    overflow: auto;
}
ul, li {
    list-style: none outside none;
}

.ui-resizable-se {
    bottom: 1px;
    cursor: se-resize;
    height: 12px;
    right: 1px;
    width: 12px;
    position: absolute;
}