JSFiddle - React, Tailwind, and code Playground

HTML

<div class="case">
        <div class="basis">
            <i class="bl"></i>
            <i class="br"></i>
            <div class="content">
                <p>Рабочий эскиз</p>
            </div>
        </div>
    </div>

CSS

.case { padding: 20px;}
        .basis { position: relative; border: 2px solid #111;}
        .content {
            background: #999; 
            min-height: 100px;
            overflow: hidden;
        }
        p { margin: 0;}
        .basis > i { border: 2px solid #111; position: absolute; width: 20px; height: 20px;}
        .basis:after { 
            left: -22px;
            top: -22px;
            border: 2px solid #111; position: absolute; width: 20px; height: 20px;content: '';
            border-width: 0 2px 2px 0;
            
        }
        .basis:before { 
            right: -22px;
            top: -22px;
            border: 2px solid #111; position: absolute; width: 20px; height: 20px; content: '';
            border-width: 0 0px 2px 2px;
        }    
        .basis > i.bl { 
            left: -22px;
            bottom: -22px;
            border-width: 2px 2px 0 0;
        }
        .basis > i.br { 
            right: -22px;
            bottom: -22px;
            border-width: 2px 0px 0px 2px;
        }