JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>task1</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<style>
body{
    margin: 20px;}
.wrap1{
    padding: 15px;
    position: relative;
    width: auto;
}
.cor1{
    border-bottom: 1px solid #666;
    border-right: 1px solid #666;
    height: 15px;
    left: 0;
    position: absolute;
    top: 0;
    width: 15px;
}
.cor2{
    border-bottom: 1px solid #666;
    border-left: 1px solid #666;
    height: 15px;
    position: absolute;
    right: 0;
    top: 0;
    width: 15px;
}

.cor3{
    border-right: 1px solid #666;
    border-top: 1px solid #666;
    bottom: 0;
    height: 15px;
    left: 0;
    position: absolute;
    width: 15px;
}
.cor4{
    border-left: 1px solid #666;
    border-top: 1px solid #666;
    bottom: 0;
    height: 15px;
    position: absolute;
    right: 0;
    width: 15px;
}
.content{
    width:auto;
    border: 1px solid #666;
    background: #f0f0f0;
    padding: 10px 14px;}
</style>
    <body>
        <div class="wrap1">
<div class="cor1"></div>
<div class="cor2"></div>
<div class="cor3"></div>
<div class="cor4"></div>
<div class="content">Рабочий эскиз</div>
</div>
    <body/>
        <html>