JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Задание 1</title>
</head>
<body>
 <div class="box">
  <div class="lt"></div>
  <div class="rt"></div>
  <p>Рабочий эскиз</p>
  <div class="lb"></div>
  <div class="rb"></div>
 </div>
</body>
</html>

CSS

body{
      padding: 8px 7px;    
     }
  .box{
      background:#f0f1f1;    
         border: 1px solid #666;
         margin: 15px;
         position: relative;
     }
     
     .box p{
         padding: 10px;            
         font-size: 16px;
         font-family: "Times New Roman", Times, serif;
         margin:0;
     }
     
     .lt{
      display: block;
         margin: -16px 0 0 -16px;    
         border-right: 1px solid #666;
         border-bottom: 1px solid #666;
         width: 15px;
         height: 15px;
     }
     .rt{
      display: block;
   right: -16px;
         top: -16px;
         border-left: 1px solid #666;
         border-bottom: 1px solid #666;
         width: 15px;
         height:15px;
         position:absolute;
     }
     .lb{
      display: block;
         margin: 0 0 -16px -16px;    
         border-right: 1px solid #666;
         border-top: 1px solid #666;
         width: 15px;
         height:15px;
     }
     .rb{
      display: block;
         border-left: 1px solid #666;
         border-top: 1px solid #666;
         width: 15px;
         height:15px;
         position:absolute;
         right: -16px;
         bottom: -16px;
     }