JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div></div>

CSS

div {
    margin: 40px auto;
    width: 40px;
    height: 34.64101615137755px;
}
div:after, div:before {
    background-color: rgba(0, 0, 0, 0.5);
}
div:after, div:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
div:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    left: 100%;
    -webkit-transform: skewX(-30deg);
    box-shadow: 65px 105px 10px 10px rgba(0, 0, 0, 0.1),
         -215px 45px 3px -3px rgba(0, 0, 0, 0.1),
     35px 215px 10px -10px rgba(0, 0, 0, 0.1),
     315px 15px 15px 15px rgba(0, 0, 0, 0.1),
     -110px 210px 6px -6px rgba(0, 0, 0, 0.1);
}
div:before {
    -webkit-transform: skewX(30deg);
    box-shadow: 65px 105px 13px 13px rgba(0, 0, 0, 0.1),
         215px 45px 10px -10px rgba(0, 0, 0, 0.1),
     -35px 200px 5px 5px rgba(0, 0, 0, 0.1),
     -315px 15px 100px 100px rgba(0, 0, 0, 0.1),
     110px 310px 20px 20px rgba(0, 0, 0, 0.1);
}