JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box effect">
    <h3>Effect Box Shadow</h3>
</div>

CSS

body {
		font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;	
	}
		
	.box h3{
		text-align:center;
		position:relative;
		top:80px;
	}
	.box {
		width:70%;
		height:200px;
		background:#D0D0D0;
		margin:40px auto;
	}
	
	/*==================================================
	 * Effect Box Shadow
	 * ===============================================*/
	.effect
	{
		position:relative;       
		-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
		   -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
				box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
	}
	.effect:before, .effect:after
	{
		content:"";
		position:absolute; 
		z-index:-1;
		-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
		-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
		box-shadow:0 0 20px rgba(0,0,0,0.8);
		top:0;
		bottom:0;
		left:10px;
		right:10px;
		-moz-border-radius:100px / 10px;
		border-radius:100px / 10px;
	} 
	.effect:after
	{
		right:10px; 
		left:auto;
		-webkit-transform:skew(8deg) rotate(3deg); 
		   -moz-transform:skew(8deg) rotate(3deg);     
			-ms-transform:skew(8deg) rotate(3deg);     
			 -o-transform:skew(8deg) rotate(3deg); 
				transform:skew(8deg) rotate(3deg);
	}