JSFiddle - React, Tailwind, and code Playground

by kayenglajom

HTML

<div id="inset-shadow-bar"></div>
  
  
  <div class="box effect7">
    <h3>Effect 7</h3>
</div>

CSS

#inset-shadow-bar { 
    background: white; 
    height: 200px; 
    width: 100%;

     box-shadow: inset  0  3em 3em -3em rgba(0,0,0,0.3),
                 inset  0  -3em 3em -3em rgba(0,0,0,0.3)
}

body { 
    padding: 2em; 
}

.box h3{
    text-align:left;
    position:relative;
    top:80px;
}
.box {
    width:100%;
    height:200px;
    background:#FFF;
    margin:40px auto;
}

/*==================================================
 * Effect 7
 * ===============================================*/
.effect7
{
    position:relative;
    box-shadow:0 5 40px rgba(0, 0, 0, 0.1), 
    0 5 40px rgba(0, 0, 0, 0.1) inset;
}
.effect7:before, .effect7:after
{
    content:"";
    position:absolute; 
    z-index:-1;
    box-shadow:0 0 20px rgba(0,0,0,0.1);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    border-radius:100px / 10px;
} 
.effect7:after
{
    right:10px; 
    left:auto; 
    transform:skew(8deg) rotate(3deg);
}