JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Градиент</title>


</head>

<body>

<div class="block3">
    <div class="bg"></div>
    <div class="wrapper">
        <div class="h">Заголовок</div>
        <div class="arrow"></div>
        <div class="content">Содержимое</div>
    </div>
</div>

</body>
</html>

CSS

body {
    background: url('http://images1.pixlis.com/background-image-checkers-chequered-checkered-squares-seamless-tileable-very-light-grey-saltpan-236nwb.png');    
    }

.block3 {
    float: left; 
    width: 100%;
    position: relative;
    border: 2px solid #004c3b;
    border-radius: 5px;
    font: 13px Arial, Helvetica, sans-serif;
    }

.bg {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    
    background: #408576;
    background: -moz-linear-gradient(top, #71ebd0, #408576);
    background: -webkit-linear-gradient(top, #71ebd0, #408576);
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#71ebd0', EndColorStr='#408576', GradientType=0);
            
    
    opacity: 0.5;
    }

.wrapper {
    min-height: 100px;
    margin: 7px;    
    
    background: #edecde;    
    border: 1px solid #666;
    border-radius: 5px;
    }    
    
.h {
    padding: 7px 10px;
    font-size: 16px;    
    
    background: #ffba00;
    background: -moz-linear-gradient(top, #ffd800, #ffba00);
    background: -webkit-linear-gradient(top, #ffd800, #ffba00);
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#ffd800', EndColorStr='#ffba00', GradientType=0);
    
    border-radius: 5px 5px 0 0;
    }
    
.arrow {
    float: left;
    margin: 0 0 -10px 5px;
    border: 10px solid #ffba00;
    border-color: #ffba00 transparent transparent transparent;
    }        
.content {
    clear: both;
    padding: 0 10px 10px;    
    }