JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div class="for_angle">
        <div class="angle" id="left_top"></div>
        <div class="angle" id="right_top"></div>
    </div>
    <div>
        <div id="text">Рабочий эскиз</div>
    </div>
    <div class="for_angle">
        <div class="angle" id="left_bottom"></div>
        <div class="angle" id="right_bottom"></div>    
    </div>
</div>

CSS

.angle{
    height:20px;
    width:20px;
    border:1px solid #444;
}
#left_top{
    border-top:none;
    border-left:none;
    float:left;
}
#right_top{
    border-right:none;
    border-top:none;
    float:right;
}
#left_bottom{
    border-left:none;
    border-bottom:none;
    float:left;
    margin-top:-1px;
}
#right_bottom{
    border-right:none;
    border-bottom:none;
    float:right;
    margin-top:-1px;
}
#text{
    background-color:#eee;
    font-family:Times New Roman;
    padding:10px;
    margin-left:20px;
    margin-right:20px;
    border:1px #444 solid;
}
.for_angle{
    height:20px;
}