JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#"><div class="effect2 button2">Shop</div></a>

CSS

.button2 {
	width:300px;
    font-size:17px;
	padding: 15px 0;
	background:#0077BC;
	margin: 25px 16px;
	text-align: center;
    color:#FFF;
}
.effect2 {position: relative;}
.effect2:before, .effect2:after {
	z-index: -1;
	position: absolute;
	content: "";
	bottom: 12px;
	left: 10px;
	width: 50%;
	top: 50%;
	max-width:300px;
	background: #000;
	-webkit-box-shadow: 0 15px 10px #000;
	-moz-box-shadow: 0 15px 10px #000;
	box-shadow: 0 15px 10px #000;
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);
}
.effect2:after {
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
	right: 10px;
	left: auto;
}