JSFiddle - React, Tailwind, and code Playground

by malsyst

HTML

<div class="box">
    <h2 class="title title-box">Внимание, опрос!</h2>
    <div class="box-content">Текст</div>
</div>
<p>В первом случае имеется градиент, на нем текст с отступом для картинки</p>
<div class="box">
    <h2 class="title  title-img title-box">Внимание, опрос!</h2>
    <div class="box-content">Текст</div>
</div>
<p>Во втором случае картинка находится на месте, но градиент исчез</p>

CSS

.box  { 
padding : 10px; 
margin : 10px; 
border : #bbb solid 2px; 
width : 210px; 
height : 100%; 
border-radius : 20px; 
background-color : #fafafa; 
box-shadow : 0 0 5px #e4e5e7; 
 }

h2.title-box {
margin: -10px;
border-bottom:   1px solid #4175ae;
height: 40px;
background-image: linear-gradient(bottom, rgb(237,237,237) 13%, rgb(250,250,250) 56%, rgb(237,237,237) 90%);
background-image: -o-linear-gradient(bottom, rgb(237,237,237) 13%, rgb(250,250,250) 56%, rgb(237,237,237) 90%);
background-image: -moz-linear-gradient(bottom, rgb(237,237,237) 13%, rgb(250,250,250) 56%, rgb(237,237,237) 90%);
background-image: -webkit-linear-gradient(bottom, rgb(237,237,237) 13%, rgb(250,250,250) 56%, rgb(237,237,237) 90%);
background-image: -ms-linear-gradient(bottom, rgb(237,237,237) 13%, rgb(250,250,250) 56%, rgb(237,237,237) 90%);
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.13, rgb(237,237,237)),
    color-stop(0.56, rgb(250,250,250)),
    color-stop(0.9, rgb(237,237,237))
);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#CFCFCF);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
  background: -moz-linear-gradient(top,  #FFFFFF,  #CFCFCF);
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
h2.title-img {
background: url(images/1235.png) no-repeat
}

h2.title {
font-size: 20px; 
font-family: Verdana, sans-serif;
padding: 10px 10px 15px 70px
  
}

.box-content  { 
padding : 20px 0 10px; 
 }