JSFiddle - React, Tailwind, and code Playground

by Nonamenonamevi4

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Блок с градиентом</title>
</head>
<body>
  <div class="container">
  <div class="wrapper">
  <div class="title"><span>Заголовок</span></div>
    <div class="content"><span>Содержание</span></div>
   </div>
  </div>
</body>
</html>

CSS

body {
  background: url(https://s1.1zoom.ru/big0/2/352818-admin.jpg) repeat-x
}

.container {
  height: 110px;
  width: 400px;
  background-color: rgba(97, 203, 179, 0.7);
  border-radius: 5px;
  border: 3px solid #075342;
  position: relative;
  top: 10px;
  margin: auto;
}

.wrapper {
  border-radius: 5px;
  background-color: #fff;
  border: 1px solid black;
  position: absolute;
  margin: 10px;
}

.title {
  border-radius: 5px 5px 0 0;
  width: 380px;
  height: 30px;
  background: linear-gradient(to top, #fdbd0f, #ffd800);
  font-size: larger;
  position: relative;
}

.title::after {
    content: ''; 
    position: absolute;
    left: 10px; bottom: -20px;
    border: 10px solid transparent;
    border-top: 10px solid #ffba00;
   }

.content {
  height: 60px;
}

span {
  position: absolute;
  margin-top: 7px;
  margin-left: 10px;
}