JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="tl"></div>   
    <div id="tr"></div>
    <div id="bl"></div>
    <div id="br"></div>
    Hello there
</div>

CSS

#container
{
    position:relative;
    top:20px;
    left:20px;
    width:200px;
    height:200px;
    border:solid 1px black;
    padding:10px;
}
/* adding border for those you'll se what really happening */
#tl, #tr, #bl, #br
{
    position:absolute;
    width:10px; height:10px;
    background-color:white;
    display:block;
}
#tl {top:-1px; left:-1px;} /*top left corner*/
#tr {top:-1px; right:-1px;} /*top right*/
#bl {bottom:-1px; left:-1px;} /*bottom left*/
#br {bottom:-1px; right:-1px;} /*bottom right */