JSFiddle - React, Tailwind, and code Playground

by justjohn

HTML

<div class="outer">
    <div class="inner">
        Content Here.
    </div>
</div>

CSS

.outer {
    position:relative;
    overflow:hidden;
    width: 100px;
    height: 200px;
}

.inner {
    position:relative;
    width: 100px;
    height: 150px;
}

.inner:before,
.inner:after {
    content:"";
    background:red;
    
    position:absolute;
    z-index:-1;
    bottom:15px;
    left:10px;
    width:50%;
    height:20%;
    max-width:300px;
   -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
   -o-transform:rotate(-3deg);
   transform:rotate(-3deg);
}

.inner:after{
   right:10px;
   left:auto;
   -webkit-transform:rotate(3deg);
   -moz-transform:rotate(3deg);
   -o-transform:rotate(3deg);
   transform:rotate(3deg);
 }