JSFiddle - React, Tailwind, and code Playground

HTML

<div class="first">
            <p class="second">Заголовок</p>
            <p class="third">Содержимое</p>
        </div>

CSS

body {
                background:url(http://wpapers.ru/wallpapers/Food/8411/1280x1024_%D0%9B%D0%B0%D0%B9%D0%BC%D1%8B.jpg);
                padding:10px;
            }
            .first {
                position:relative;
                height:116px;
                width:100%;
                background: linear-gradient(top, rgba(97, 204, 180, 0.5), rgba(92, 165, 149, 0.5));
                background: -webkit-linear-gradient(top, rgba(97, 204, 180, 0.5), rgba(92, 165, 149, 0.5));
                border-radius:5px;
                border:2px solid #004c3b;
            }
            .second {
                position:absolute;
                width:98%;
                padding-top:10px;
                padding-bottom:10px;
                padding-left:10px;
                margin:8px;
                border-top-right-radius:5px;
                border-top-left-radius:5px;
                font-size:120%;
                font-family:sans-serif;
    line-height:23px;
    height: auto;
                background: linear-gradient(top, #ffd800, #ffbd00);
                background: -webkit-linear-gradient(top, #ffd800, #ffbd00);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
            }
            .third {
                position:absolute;
                height:45px;
                width:98%;
                left:8px;
                top:40%;
                background:#edecde;
                padding-top:10px;
                padding-left:10px;
                border-bottom-right-radius:5px;
                border-bottom-left-radius:5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
            }