JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Задание 2. Блок с тенью
</title>
<link type = "text/css" rel = "stylesheet" href = "style.css">
<!--[if IE]>
<script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h1>
Заголовок
</h1>
<div>
Содержание блока
</div>
</body>
</html>
CSS
*
{
margin: 0;
padding: 0;
font-size: 100%;
}
html,
body
{
padding: 20px;
}
html
{
font: 125% arial, sans-serif;
}
body
{
font-size: 50%; /* 10px */
}
h1,
div
{
background-color: #C9E39C;
padding: 5px 10px;
max-width: 250px;
}
h1
{
font-size: 1.6em;
display: inline-block;
border-radius: 5px 5px 0 0;
border-top: 1px solid #ACD283;
border-left: 1px solid #ACD283;
border-right: 1px solid #ACD283;
margin-bottom: -1px;
box-shadow: 0 -2px 5px #CFCCD3;
}
div
{
font-size: 1.4em;
min-height: 100px;
border-radius: 0 0 5px 5px;
border: 1px solid #ACD283;
box-shadow: 0 0 7px #CFCCD3;
}