JSFiddle - React, Tailwind, and code Playground
by VasyaPupkin
HTML
<div class="all">
<div class="title">Заголовок</div>
<div class="tr">
<b class="t10"></b>
<b class="t9"></b>
<b class="t8"></b>
<b class="t7"></b>
<b class="t6"></b>
<b class="t5"></b>
<b class="t4"></b>
<b class="t3"></b>
<b class="t2"></b>
<b class="t1"></b>
</div>
<div class="content">Содержимое</div>
<div class="alpha">
</div>
</div>
CSS
body
{
background:url('http://htmlbook.ru/example/images/redline.png');
}
.alpha
{
background:;
border:solid 2px black;
border-radius:5px;
padding:7px;
background: -webkit-gradient(linear, left top, left bottom, from(#3399ff), to(#3377cc));
/* Для Mozilla/Gecko (Firefox и т.д.) */
background: -moz-linear-gradient(top, #3399ff, #3377cc);
/* Для Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF3399ff , endColorstr=#FF3377cc )";
/* Opera */
background-image: -o-linear-gradient(top,rgb(51,153,255),rgb(51,119,220));
opacity:0.5;
filter: alpha(Opacity=50);
position:absolute;
height:100%;
top:0;
z-index:0;
}
.all
{
position:relative;
}
.content
{
padding:7px;
padding-top:0;
border:solid 1px #666;
border-top:none;
border-radius:0 0 5px 5px;
-moz-border-radius:0 0 5px 5px;
-webkit-border-radius:0 0 5px 5px;
background:#dddcce;
font-size:12pt;
}
.title
{
font-size:14pt;
padding:7px;
padding-bottom:4px;
border:solid 1px #666;
border-bottom:none;
border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
background: -webkit-gradient(linear, left top, left bottom, from(#ffd800), to(#ffba00));
/* Для Mozilla/Gecko (Firefox и т.д.) */
background: -moz-linear-gradient(top, #ffd800 , #ffba00);
/* Для Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFD800, endColorstr=#FFFFBA00)";
/* Opera */
background-image: -o-linear-gradient(top,rgb(255,216,0),rgb(255,186,0));
}
.tr
{
height:10px;
background:#dddcce;
border-left:solid 1px #666;
border-right:solid 1px #666;
padding-left:5px;
}
.tr b
{
height: 1px;
font-size: 1px;
overflow: hidden;
border-style: solid;
...