JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Задание 2</title>
</head>
<body>
<div class="wrapper">
<h1>Заголовок</h1>
<div class="inner">
<p>Содержание блока</p>
</div>
</div>
</body>
</html>
CSS
body {
font-family: Arial, sans-serif;
}
.wrapper {
-moz-border-radius: 5px;
-weblit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: -2px 2px 3px #aeaeae;
-webkit-box-shadow: -2px 2px 3px #aeaeae;
box-shadow: -2px 2px 3px #aeaeae;
}
h1 {
display: inline-block;
padding: 9px;
font-size: 14px;
font-weight: bold;
max-width: 250px;
border: 1px solid #a3d869;
background: #c9e39c;
border-bottom: none;
position: relative;
top: 1px;
z-index: 1;
-moz-border-radius: 5px 5px 0 0;
-weblit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
-moz-box-shadow: 2px -2px 2px #aeaeae;
-webkit-box-shadow: 2px -2px 2px #aeaeae;
box-shadow: 2px -2px 2px #aeaeae;
}
.inner {
min-height: 120px;
padding: 10px;
border: 1px solid #a3d869;
background: #c9e39c;
-moz-border-radius: 0 0 5px 5px;
-weblit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-moz-box-shadow: 2px -2px 3px #aeaeae;
-webkit-box-shadow: 2px -2px 3px #aeaeae;
box-shadow: 2px -2px 3px #aeaeae;
}