JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    Я блок с рамкой, обычный блок с обычной рамкой (ну, рисованной, ну, приградиенченной — и что?). Зачем мне всякие излишества типа дополнительных оберток? Мне и без них неплохо, не правда ли? А если ваш браузер устарел на 6 и более лет, то какое у вас право требовать от меня показывать вам новомодные фокусы-покусы? :)
</div>

CSS

div {
    position: relative;
    padding: 20px;
    background: url(http://fc06.deviantart.net/fs34/f/2008/238/c/4/Seamless_Brick_Texture_by_Paradise_Awaits.jpg);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=#00000000, endColorstr=#66000000);
    z-index: 1;
}

div:before{    
    content: '\a0';
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    /* IE10 */
    background-image: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 100%);
    /* Mozilla Firefox */
    background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 100%);
    /* Opera */
    background-image: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 100%);
    /* Webkit (Safari/Chrome 10) */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,.4)));
    /* Webkit (Chrome 11+) */
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 100%);
    /* Proposed W3C Markup */
    background-image: linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 100%);
}

div:after {
    content: '\a0';
    display: block;
    position: absolute;
    top: 10px; left: 10px; right: 10px; bottom: 10px;
    background: #fff;
    z-index: -1;
}