JSFiddle - React, Tailwind, and code Playground

by kuonyuu

HTML

<div class="paperShadow shadow-bottom"></div>

CSS

.paperShadow {
display: block;
position: relative;
background: #fff;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.05);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.05);
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    height: 200px;
width: 700px;
}

.paperShadowBasesetting, .paperShadow.shadow-bottom:before, .paperShadow.shadow-bottom:after, .paperShadow.shadow-left:before, .paperShadow.shadow-right:after, .paperShadow.shadow-vertical:before, .paperShadow.shadow-vertical:after, .paperShadow.shadow-horizontal:before, .paperShadow.shadow-horizontal:after {
position: absolute;
z-index: -1;
content: "";
width: 50%;
background: rgba(0,0,0,0.2);
}

.paperShadow.shadow-bottom:before, .paperShadow.shadow-bottom:after, .paperShadow.shadow-left:before, .paperShadow.shadow-right:after {
-webkit-box-shadow: 0 15px 15px rgba(0,0,0,0.2);
-moz-box-shadow: 0 15px 15px rgba(0,0,0,0.2);
box-shadow: 0 15px 15px rgba(0,0,0,0.2);
top: 80%;
bottom: 15px;
max-width: 300px;
}

.paperShadow.shadow-bottom:after, .paperShadow.shadow-right:after {
right: 10px;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}


Pseudo ::after element
.paperShadow.shadow-bottom:after, .paperShadow.shadow-right:after {
right: 10px;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
.paperShadow.shadow-bottom:before, .paperShadow.shadow-bottom:after, .paperShadow.shadow-left:before, .paperShadow.shadow-right:after {
-webkit-box-shadow: 0 15px 15px rgba(0,0,0,0.2);
-moz-box-shadow: 0 15px 15px rgba(0,0,0,0.2);
box-shadow: 0 15px 15px rgba(0,0,0,0.2);
top: 80%;
bottom: 15px;
max-width: 300px;
}
.paperShadowBasesetting, .paperShadow.shadow-bottom:before, .paperShadow.shadow-bottom:after, .paperShadow.shadow-left:before, .paperShadow.shadow-right:after, .paperShadow.shadow-vertical:before, .paperShadow.shadow-vertical:after,...