JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
    <span>Пример блока с полупрозрачным фоном, тенью и закругленными углами.</span>
</div>

CSS

html,body{
    padding:0px;
    margin:0px;
    height:100%;
}
.block{
    position:relative;
    margin:5px;
    padding:10px;
    width:50%;
}
.block>span{
    position:relative;
    display:block;
    width:100%;
    overflow:auto;
    z-index:1;
}
.block_background{
    position:absolute;
    top:5px;
    bottom:5px;
    left:5px;
    right:5px;
    background:#00f;
    z-index:0;
}
.block_border_top{
    position:absolute;
    top:0px;
    left:5px;
    right:5px;
    height:5px;
    background:#0f0;
    z-index:2;
}
.block_border_bottom{
    position:absolute;
    bottom:0px;
    left:5px;
    right:5px;
    height:5px;
    background:#0f0;
    z-index:2;
}
.block_border_left{
    position:absolute;
    top:5px;
    bottom:5px;
    left:0px;
    width:5px;
    background:#0f0;
    z-index:2;
}
.block_border_right{
    position:absolute;
    top:5px;
    bottom:5px;
    right:0px;
    width:5px;
    background:#0f0;
    z-index:2;
}
.block_toggel_top-left{
    position:absolute;
    top:0px;
    left:0px;
    width:5px;
    height:5px;
    background:#f00;
    z-index:2;
}
.block_toggel_top-right{
    position:absolute;
    top:0px;
    right:0px;
    width:5px;
    height:5px;
    background:#f00;
    z-index:2;
}
.block_toggel_bottom-left{
    position:absolute;
    bottom:0px;
    left:0px;
    width:5px;
    height:5px;
    background:#f00;
    z-index:2;
}
.block_toggel_bottom-right{
    position:absolute;
    bottom:0px;
    right:0px;
    width:5px;
    height:5px;
    background:#f00;
    z-index:2;
}

JavaScript

$(document).ready(function()
{
    $('.block').prepend('<div class="block_background"></div>');
    $('.block_background').css({'opacity':'0.5'});
    $('.block').append('<div class="block_border_top"></div>');
    $('.block').append('<div class="block_border_bottom"></div>');
    $('.block').append('<div class="block_border_left"></div>');
    $('.block').append('<div class="block_border_right"></div>');
    $('.block').append('<div class="block_toggel_top-left"></div>');
    $('.block').append('<div class="block_toggel_top-right"></div>');
    $('.block').append('<div class="block_toggel_bottom-left"></div>');
    $('.block').append('<div class="block_toggel_bottom-right"></div>');
});