JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<head>
    <title>sol1</title>
    <style type="text/css">
    *
    {
        margin: 0;
        padding: 0;
        border: 0;
    }
    body
    {
        width: 100%;
        height: 100%;
    }
    div
    {
        background: #f0f0f0;
        position: relative;
        border: 1px solid #666;
        min-width: 100px;
        min-height: 10px;
        padding: 10px 20px;
        margin: 50px 100px;
    }
    div::after
    {
        border: solid #666666;
        content: "";
        height: 16px;
        left: -17px;
        position: absolute;
        top: -17px;
        width: 16px;
        border-width: 0 1px 1px 0;
    }
    div::before
    {
        border: solid #666666;
        content: "";
        height: 16px;
        right: -17px;
        position: absolute;
        top: -17px;
        width: 16px;
        border-width: 0 0 1px 1px;
    }
    div span::after
    {
        border: solid #666666;
        content: "";
        height: 16px;
        left: -17px;
        position: absolute;
        bottom: -17px;
        width: 16px;
        border-width: 1px 1px 0 0;
    }
    div span::before
    {
        border: solid #666666;
        content: "";
        height: 16px;
        right: -17px;
        position: absolute;
        bottom: -17px;
        width: 16px;
        border-width: 1px 0 0 1px;
    }
    </style>
</head>

<body>
    <div>
        <span>
        Рабочий эскиз
        </span>
    </div>
</body>
</html>