JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="top-left"><div class="cross-a"></div><div class="cross-b"></div></div>
    <div id="text">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam facilisis justo ut nunc scelerisque tincidunt. Quisque iaculis vulputate dui, in mollis odio vestibulum a. Donec sagittis mollis elit vitae tincidunt. Donec sed venenatis justo. Praesent eleifend, neque sed semper varius, dui nibh pharetra augue, at feugiat mauris lacus eu lacus. Nunc laoreet lorem nec lobortis ultrices. Quisque dignissim, massa ac porta dignissim, mauris urna pulvinar enim, nec tincidunt nibh lorem non dui. Nulla non pretium enim.</p>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
}
#container {
    position: absolute;
    width: 400px;
    height: 400px;
    top: 5px;
    left: 5px;
}

#text {
    text-align: justify;
    height: 100%;
    width: 100%;
    overflow: auto;
    border-top-left-radius: 15px 28px 10px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border-top: solid 2px #000;
    border-bottom: solid 2px #000;
    border-left: solid 2px #000;
    border-right: solid 2px #000;
    padding: 26px;
}

#container .top-left {
    position: absolute;
    top: 0;
    left: 0;
    height: 28px;
    width: 28px;
    border-top: solid 2px #fff;
    border-left: solid 2px #fff;
}

.cross-a, .cross-b {
    position:absolute;
    width:0;
    height:0;
}

.cross-a {
    top:  -2px;
    left: -2px;
    border-top:   28px solid transparent;
    border-right: 28px solid #000;
}

.cross-b {
    top:  0px;
    left: 0px;
    border-top:   26px solid transparent;
    border-right: 26px solid #FFFFFF;
}

JavaScript

$(function(){
$('#container').resizable();
$('#container').draggable();
});