JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<title>first task</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
body {
font-size: 14pt;
}
#mainbox {
width: 95%;
margin: 0 auto;
}
#top, #bottom {
height: 10px;
}
#middle {
border-left: 10px solid #fff;
border-right: 10px solid #fff;
height: 1%;
position: relative;
}
#middle:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
#textbox {
width: 100%;
float: left;
overflow: hidden;
margin-right: -100%;
}
#left {
float: left;
left: -10px;
position: relative;
width: 10px;
}
#right {
float: right;
margin-right: -10px;
position: relative;
width: 10px;
}
#topleft, #bottomleft {
width: 10px;
height: 10px;
float: left;
border-right: 1px solid black;
}
#topright, #bottomright {
width: 10px;
height: 10px;
float: right;
border-left: 1px solid black;
}
#content {
padding: 20px;
background: #f0f0f0;
border-left: 1px solid black;
border-right: 1px solid black;
}
</style>
</head>
<body>
<div id='mainbox'>
<div id="top" style="border-bottom: 1px solid black;">
<div id="topleft"></div>
<div id="topright"></div>
</div>
<div id="middle">
<div id="textbox">
<div id="content">Рабочий эскиз</div>
</div>
<div id="left"></div>
...