JSFiddle - React, Tailwind, and code Playground

HTML

<div class="beauty-boxes">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id quam sit amet augue interdum egestas. Aliquam erat volutpat. Vestibulum massa eros, sagittis sit amet nisi ut, auctor dapibus ipsum. Donec lacinia interdum elit.</p>
</div>

CSS

body{
	font-family:Verdana, Geneva, sans-serif;
}

.beauty-boxes{
	transition: all 0.5s ease;
	position:relative;
	float:left;
	width:45%;
	padding:2px;
	margin:3px;
	background:#fff;
	-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0), 0 0 40px rgba(0, 0, 0, 0) inset;
	-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0) inset;
	box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0) inset;
	-moz-border-radius:4px;
	border-radius:4px;
} 
.beauty-boxes:before,
.beauty-boxes:after {
	content:"";
	position:absolute;
	z-index:-3;
	bottom:15px;
	left:12px;
	width:50%;
	height:20%;
	max-width:350px;
	max-height:90px;
	-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
	-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
	box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
	-webkit-transform:rotate(-3deg);
	-moz-transform:rotate(-3deg);
	-ms-transform:rotate(-3deg);
	-o-transform:rotate(-3deg);
	transform:rotate(-3deg);
}

.beauty-boxes:after {
	right:10px;
	left:auto;
	-webkit-transform:rotate(3deg);
	-moz-transform:rotate(3deg);
	-ms-transform:rotate(3deg);
	-o-transform:rotate(3deg);
	transform:rotate(3deg);
}

.beauty-boxes p {
	font-size:14px;
	font-weight:bold;
	padding-left:5px;
    padding-right:5px;
    margin-top:5px;
    margin-bottom:5px;
	text-align:justify
}

.beauty-boxes:hover{
	background-color:#161616;
	color:#fff;
}