JSFiddle - React, Tailwind, and code Playground

by sensei

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Блок с тенью</title>
<style>

body{
margin:10px;
}

.small{
box-sizing:border-box;
width:110px;
height:30px;
background:#c9e39c;
border-right:solid 1px #a3d869;
border-left:solid 1px #a3d869;
border-top:solid 1px #a3d869;
box-shadow:0px 0px 5px 0px;
}

.big{

box-sizing:border-box;
height:120px;
width:400px;
background:#c9e39c;
border:solid 1px #a3d869;
box-shadow:0px 0px 5px 0px;
}


</style>
</head>

<body>

<div class="small"></div><div class="big"></div>

</body>
</html>

CSS

.small, .big {
    position: relative;
}

.small:before {
    content: '';
    height: 7px;
    
    position: absolute;
    bottom: -1px;   left: -1px;
                    right: -1px;
    
    z-index: 2;
    
    background: #000;
    border-left: 1px solid #a3d869;
    border-right: 1px solid #a3d869;
}