JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<title>Задание 3</title>

<div class="block">
    <h2 class="block-title">Заголовок</h2>
    <div class="block-content_">
        Содержимое
    </div>
</div>

CSS

body {
    background: url(http://htmlbook.ru/example/images/redline.png);
}
.block {
    border: 2px solid #004c3b;
    padding: 7px;
    border-radius: 5px;
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, rgba(0, 204, 160, .6)),
        color-stop(1, rgba(8, 166, 132, .8))
    );
    background: -o-linear-gradient(
        rgba(0, 204, 160, .6),
        rgba(8, 166, 132, .8)
    );
    background: -moz-linear-gradient(
        center top,
        rgba(0, 204, 160, .6) 0%,
        rgba(8, 166, 132, .8) 100%
    );
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#9900cca0', EndColorStr='#CC08a684')";

}
.block-title {
    border: solid #666;
    border-width: 1px 1px 0 1px;
    border-radius: 5px 5px 0 0;
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #ffd800),
        color-stop(1, #ffba00)
    );
    background: -o-linear-gradient(#ffd800,#ffba00);
    background: -moz-linear-gradient(
        center top,
        #ffd800 0%,
        #ffba00 100%
    );
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffd800', EndColorStr='#ffffba00')";
    padding: 7px;
    position: relative;
    font: 16px Arial, Helvetica, sans-serif;
}
.block-title::after {
    position: absolute;
    top: 100%;
    left: 5px;
    content: "";
    background: red;
    border-top: 10px solid #ffba00;
    border-left: 10px solid #edecde;
    border-right: 10px solid #edecde;
}

.block-content {
    background: #edecde;
    border-radius: 0 0 5px 5px;
    padding: 12px 5px 12px 10px;
    border: solid #666;
    border-width: 0 1px 1px 1px;
    font: 13px Arial, Helvetica, sans-serif;
    min-height: 45px;
}