JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
    
    <head>
        <meta charset="utf-8">
        <title>Блок с градиентом</title>
        <style>
            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%;
                /*opacity:0.6;*/
                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%;
                height:23px;
                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;
                background: linear-gradient(top, #ffd800, #ffbd00);
                background: -webkit-linear-gradient(top, #ffd800, #ffbd00);
            }
            .third {
                position:absolute;
                height:45px;
                width:98%;
                left:8px;
                top:30%;
                background:#edecde;
                padding-top:10px;
                padding-left:10px;
                border-bottom-right-radius:5px;
                border-bottom-left-radius:5px;
            }
        </style>
    </head>
    
    <body>
        <div class="first">
            <p class="second">Заголовок</p>
            <p class="third">Содержимое</p>
        </div>
    </body>

</html>