JSFiddle - React, Tailwind, and code Playground

by VasyaPupkin

HTML

<div class="title">
    <div class="dop1"></div>
     <div class="text">Заголовок</div>
    </div>
<div class="block">
    <div class="dop2"></div>
    <div class="text">Содержание блока</div>
</div>

CSS

.block
{
   border:solid 1px #A3D869;
   height:100px;
   background:#C9E39C;
   padding:5px 7px;
   padding-top:0px;
   border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
    min-width:250px;
    position:relative;
    box-shadow: 0px 0px 12px #999;
-moz-box-shadow:  0px 0px 12px #999; 
    -webkit-box-shadow:  0px 0px 12px #999; 
}
.co
{
    width:100%;
    position:relative;
}
.title
{
   position:relative; 
   display:block;
   max-width:250px;
   height:1em;
   border:solid 1px #A3D869;
   background:#C9E39C;
   padding:5px 7px;
   border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
    white-space: nowrap;
         box-shadow: 0px 0px 12px #999;
-moz-box-shadow:  0px 0px 12px #999; 
    -webkit-box-shadow:  0px 0px 12px #999;  
}
.dop1
{
    position:absolute;
    height:20px; 
    border-left:solid 1px #A3D869;
    border-right:solid 1px #A3D869;
    border-bottom:solid 1px #C9E39C;  
    background:#C9E39C;
    width:100%;
    left:-1px;
    bottom:-2px;
    z-index:2;
} 
.dop2
{
    position:absolute;
    height:8px;
    border:solid 1px #A3D869;
    border-bottom:none;
    background:#C9E39C;
    width:100%;
    left:-1px;
    top:-1px;
    z-index:1; 
}
.text
{
    text-align:justify;
    position:absolute;
    z-index:3;
    padding-right:7px;
}
.title .text
{
    max-width:243px;
    overflow:hidden;
}