JSFiddle - React, Tailwind, and code Playground

HTML

<div class="text">
    <span class="corner TL"></span>
    <span class="corner TR"></span>
    <span class="corner BL"></span>
    <span class="corner BR"></span>
    <div class="text">Text</div>
</div>

CSS

body {
    padding: 30px
}
.text {
    background: #fff;
    width: 300px;
    height: 200px;
    position: relative;
    z-index: 9;
    text-align:center;
    
}
.corner {
    position: absolute;
    background: blue;
    width: 30px;
    height: 30px;
    
}
.TL {
    top: -4px;
    left: -4px
}
.TR {
    top: -4px;
    right: -4px
}
.BL {
    bottom: -4px;
    left: -4px
}
.BR {
    bottom: -4px;
    right: -4px
}