JSFiddle - React, Tailwind, and code Playground

by Ratmir

HTML

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Блок с тенью</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
	<article>
    	<h1>Заголовок</h1>
        <p>Содержание блока</p>
    </article>
</body>
</html>

CSS

body, h1, p {
	margin: 0;
	padding: 10px;
}

h1, p {
	background: #C9E39C;
	border: 1px solid #A3D869;
}

h1, h1:after {
	-moz-border-radius: 7px 7px 0 0;
	-webkit-border-radius: 7px 7px 0 0;
	border-radius: 7px 7px 0 0;
}

h1:after, p {
	-webkit-box-shadow: 0 0 8px #666;
    -moz-box-shadow: 0 0 8px #666;
    box-shadow: 0 0 8px #666;
}

h1 {
	display: inline-block;
	max-width: 250px;
	font-size: 20px;
	border-bottom: none;
	position: relative;
}

h1:after {
    content: "";
	position: absolute;
    top: -1px;
    bottom: 0;
    left: -1px;
    right: -1px;
    z-index: -1;
}

p {
	height: 120px;
	-moz-border-radius: 0 0 7px 7px;
	-webkit-border-radius: 0 0 7px 7px;
	border-radius: 0 0 7px 7px;
	border-top: none;
}