JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<meta charset="utf-8">
<title>Блок №3</title>
<div class="b3">
    <div>
        <h1>Заголовок</h1>
        <p>Содержимое</p>
    </div>
</div>

CSS

body { background: url(http://htmlbook.ru/example/images/redline.png); font: .75em/1.333 sans-serif; margin: 0; padding: 0; }
.b3 { margin: 12px; border-radius: 5px; background:  rgba(20%,80%,55%,.5); padding: 6px; border: 2px solid #053; }
.b3>div { background: #fff; border-radius: 5px; min-height: 100px; padding: 8px; border: 1px  solid #000; }
.b3 h1 { font-size: 1.25em; margin: 0; background: #ffa; background: -moz-linear-gradient(#ffa,#fd0); background: -webkit-gradient(linear, left top, left bottom, from(#ffa), to(#fd0));  background: -o-linear-gradient(#ffa,#fd0); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr=#00ffffaa, endColorstr=#ffffdd00)"; padding: 8px; border-radius: 5px 5px 0 0; margin: -8px -8px 0; position: relative; }
.b3 h1:before, .b3 h1:after { width: 0; height: 0; display: inline-block; content: '.'; position: absolute; top: 100%; overflow: hidden; }
.b3 h1:after{ border-top: solid #fd0 10px; border-left: solid #fff 10px; left: 8px; }
.b3 h1:before { border-top: solid #fd0 10px; border-right: solid #fff 10px; left: 18px; }
p { margin: .667em 0; }