JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>work 2</title>
</head>
<body>
<div class="tabwrap">
<div class="tab">
<h1>Заголовок</h1>
</div>
<div class="tabcont">
<div class="mask">
<p>Содержимое блока</p>
</div>
</div>
</div>
</body>
</html>
CSS
* {
margin:0;
padding:0;
}
body {
font: 14px/16px Arial, Tahoma, Verdana, sans-serif;
padding:20px;
}
.tabwrap {
width:100%;
}
.tab {
background:#c9e39c;
max-width:250px;
padding:10px;
float:left;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-o-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
border-top:1px solid #a7c17a;
border-left:1px solid #a7c17a;
border-right:1px solid #a7c17a;
margin:0 0 -1px;
position:relative;
box-shadow:0 0px 5px #888;
}
.tabcont {
background:#c9e39c;
min-height:200px;
padding:0px;
clear:both;
-webkit-border-radius: 0 3px 10px 10px;
-moz-border-radius: 0 3px 10px 10px;
-o-border-radius: 0 3px 10px 10px;
border-radius: 0 3px 10px 10px;
border:1px solid #a7c17a;
box-shadow:0 0 5px #888;
}
.mask {
background:#c9e39c;
min-height:200px;
padding:10px;
clear:both;
-webkit-border-radius: 0 3px 10px 10px;
-moz-border-radius: 0 3px 10px 10px;
-o-border-radius: 0 3px 10px 10px;
border-radius: 0 3px 10px 10px;
position:relative;
}