JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>sol2</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
border: 0;
}
body
{
width: 100%;
height: 100%;
}
div
{
background: #c9e39c;
position: relative;
border: 1px solid #a3d869;
min-width: 200px;
min-height: 100px;
padding: 10px 20px;
margin: 50px 100px;
border-radius: 0 0 10px 10px;
box-shadow: 0 0 5px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.4);
}
div h3
{
display: block;
border: solid #a3d869;
border-width: 1px 1px 0 1px;
position: relative;
font-size: 14pt;
background: #c9e39c;
padding: 5px 20px;
height: 20px;
max-width: 250px;
float: left;
margin: -42px 0 0 -21px;
border-radius: 10px 10px 0 0;
box-shadow: 0 -1px 5px rgba(0,0,0,.4);
-webkit-box-shadow: 0 -1px 5px rgba(0,0,0,.4);
white-space: nowrap;
}
div h3::before
{
content: "";
width: 100%;
height: 6px;
bottom: -6px;
left: 0;
background: #c9e39c;
position: absolute;
}
div h3 span
{
display: block;
max-width: 260px;
overflow: hidden;
}
</style>
</head>
<body>
<div>
<h3>
<span>
Заголовок
</span>
</h3>
<span>
Содержание блока
</span>
</div>
</body>
</html>