JSFiddle - React, Tailwind, and code Playground

HTML

<div id="all">
    <div id="border">
        <div id="opa">&nbsp;</div>
        <div id="content">
            <div id="head"><h1>Заголовок</h1></div>
            <div id="div"></div>
            <p>Содержимое<br><br><br><br><br><br>Опять не влезло :(</p>
        </div>
    </div>
</div>

CSS

body{
    background:url(http://www.walland.ru/fotos/1290853570_16.jpg);
}

#all{
    width:96%;
    margin:2%;
    min-width:250px;
}

#border{
    width:100% - 20px;
    height:125px;
    border:2px solid #004c3b;
    display:block;
    padding:10px;
    border-radius:10px 10px 10px 10px;
}

#opa{
    background:-moz-linear-gradient(
            top,
            #199333,
            #1fa384);
    opacity:0.5;
    width:100% + 20px;
    height:145px;
    display:block;
    border-radius:8px 8px 8px 8px;
    z-index:1;
    margin:-10px;
    position:relative;
}

#content{
    border-radius:10px 10px 10px 10px;
    background:#fff;
    z-index:2;
    height:100%;
    position:relative;
    margin-top:-135px;
    padding-left:10px;
}

#head{
    height:25px;
    background:#ffba00;
    width:100% - 15px;
    display:block;
    position:relative;
    z-index:3;
    border-radius:9px 9px 0 0;
    padding:5px 0 0 15px;
    margin-left:-10px;
}

p{
    font-family:Verdana;
    font-size:12px;
}

#div{
    width:0; 
    height:0; 
    border-left: 7px solid transparent; 
    border-right: 7px solid transparent;
    border-top: 12px solid #ffba00;
    border-bottom: 0;
    margin-left:15px;
}