JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wrapper">
<div class="shadow"></div>
<div class="content">This is your content</div>
</div>
CSS
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
.wrapper {
position: relative;
margin: 100px auto 0;
width: 80%; /* .content width */
height: 400px; /* .content height */
}
.content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff; /* .content background */
}
.shadow {
position: absolute;
top: -10%; /* .content shadow top height */
right: -5%; /* .content shadow right width */
bottom: -10%; /* .content shadow bottom height */
left: -5%; /* .content shadow left width */
background: #000; /* .content shadow, unfortuntely no blur effect */
}