JSFiddle - React, Tailwind, and code Playground

by kein1945

HTML

<div class="container op1">
    <div class="box">
        <p>Add {z-index:1} to the box and use a child element to hide the stacked shadows. The only solution for rotations.</p>
        <p>E.g. Last example <a href="http://nicolasgallagher.com/css-drop-shadows-without-images/demo/">here</a></p>
    </div>
</div>

<p style="margin:1em 0; text-align:center;">or</p>

<div class="container op2">
    <div class="box">
        <p>Add {position:relative; z-index:1;} to the box's parent.</p>
        <p>This stops the pseudo-elements disappearing behind the background colour of the parent.</p>
    </div>
</div>

CSS

html,
body,
div {
    padding:0;
    margin:0;
    font:14px/1.4 Arial, sans-serif;
}

.container {
    overflow:hidden;
    background:#f5f5f5;
}

p {
    margin:0 0 1em;
}

.box {
    position:relative;
    width:220px;
    min-height:120px;
    padding:15px;
    border:1px solid #efefef;
    margin:20px auto;    
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.27),
                       0 0 60px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.27),
                       0 0 40px rgba(0, 0, 0, 0.06) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.27), 
                       0 0 40px rgba(0, 0, 0, 0.06) inset;
}

.box:before,
.box:after { 
    content:''; 
    position:absolute; 
    z-index:-2; 
    width:70%;
    max-width:200px; /* for liquid versions */
    height:55%; 
    bottom:10px;
    left: 10px; 
    -webkit-box-shadow:0 8px 16px rgba(0, 0, 0, 0.3); 
       -moz-box-shadow:0 8px 16px rgba(0, 0, 0, 0.3); 
            box-shadow:0 8px 16px rgba(0, 0, 0, 0.3); 
    -webkit-transform:skew(-15deg) rotate(-6deg); 
       -moz-transform:skew(-15deg) rotate(-6deg); 
            transform:skew(-15deg) rotate(-6deg);
} 

.box:after {
    left:auto;
    right: 10px; 
    -webkit-transform:skew(15deg) rotate(6deg);
       -moz-transform:skew(15deg) rotate(6deg);
            transform:skew(15deg) rotate(6deg);
}

/* Hack 1 */

.op1 {
    position:relative;
    z-index:1;
    overflow:hidden;
    background:#f5f5f5;
}

/* Hack 2 */

.op2 .box {
    z-index:1;
    -webkit-box-shadow:none;
       -moz-box-shadow:none;
            box-shadow:none;
}

.op2 .box :first-child:before {
    content:"";
    position:absolute;
    z-index:-1;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.27),
                       0 0 60px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.27),
                       0 0 40px rgba(0, 0,...