JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>2 block</title>
<style type="text/css">
.one { position: relative; height: 30px; font-weight: bold; font-size: 1.3em; }
.two { padding: 20px 0 0 20px; position: absolute; bottom: 8px; top: 39px; right: 8px; left: 10px; border: 1px solid Chartreuse; border-top: none; background: #C9E39C; border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; box-shadow: 5px 5px 5px #C9E39C; -moz-box-shadow: 0px 0px 15px #C9E39C; -webkit-box-shadow: 5px 5px 5px #C9E39C; }
span { overflow: hidden; padding: 5px 10px; max-width: 250px; height: 100%; border: 1px solid Chartreuse; border-bottom: none; background: #C9E39C; display: table-cell; border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; box-shadow: 5px 5px 5px #C9E39C; -moz-box-shadow: 0px 0px 15px #C9E39C; -webkit-box-shadow: 5px 5px 5px #C9E39C; }
</style>
</head>

<body>
<div class="one"><span>Заголовок</span></div>
<div class="two">Содержание блока</div>
</body>
</html>