JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div id="border"></div>
    <div id="content">
        <div id="title">
            Заголовок
        </div>
        <div id="triangle_c"><span id="triandle"></span></div>
        <div id="text">Содержимое</div>
    </div>
</div>

CSS

body{
    background-image:url(http://k.min.us/jdAQnS.png);
}
#main{
    position:relative;
    padding:10px;
}
#border{
    position:absolute;
    left:0;
    top:0;
    height:100%;
    Width:100%;
    background-color:#5EB8A3;
    border-radius:5px;
    border:2px solid #004C3B;
    opacity:0.7;
    z-index:-1;
}
#content{
    z-index:2;
    height:auto;
    background-color:#EDECDE;
    border-radius:5px;
    border:1px solid #666666;
}
#title{
    padding:5px;
    background-color:#FFC900;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
#triangle_c{
    padding-top:15px;
    padding-left:10px;
    height:0;
}
#triandle{
    width:0; 
    height: 0; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    border-top: 15px solid #FFC900;
}
#text{
    padding:15px;
    padding-top:5px;
    font-size:12px;
}