JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
        <div class="frame">
            <div class="headline">
                Заголовок
            </div>
            <div class="content">
                Содержимое блока
            </div>
        </div>
    </div>

CSS

body { margin: 30px; background: url(../bg-body.gif) }
        .box {
            background: linear-gradient(rgba(97,204,180,0.1),rgba(92,165,149,1));
            background: -moz-linear-gradient(rgba(97,204,180,0.1),rgba(92,165,149,1));
            background: -webkit-linear-gradient(rgba(97,204,180,0.1),rgba(92,165,149,0.8));
            background: -o-linear-gradient(rgba(97,204,180,0.1),rgba(92,165,149,1));
            background: -ms-linear-gradient(rgba(97,204,180,0.1),rgba(92,165,149,1));
            border: 3px solid #004c3b;
            border-radius: 15px;
            padding: 10px;
        }
        .frame {
            border: 1px solid #000;
            border-radius: 5px;
            height: 100px;
            background: #eee;
        }
        .headline {
            background: linear-gradient(#fd0,#ffba00);
            background: -moz-linear-gradient(#fd0,#ffba00);
            background: -webkit-linear-gradient(#fd0,#ffba00);
            background: -o-linear-gradient(#fd0,#ffba00);
            background: -ms-linear-gradient(#fd0,#ffba00);
            padding: 10px;
            border-radius: 5px 5px 0 0;
            position: relative;
        }
        .headline:after {
            content: '';
            width: 10px;
            height: 10px;
            background: #ffba00;
            position: absolute;
            bottom: -5px;
            left: 10px;
            transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
        }
        .content {
            padding: 10px;
        }