JSFiddle - React, Tailwind, and code Playground

by Felis Catus

HTML

<div class="curl">

</div>

CSS

.curl {
	width:120px;
	height:120px;
	position: absolute;
	top:0;
	left:0;
	background : 
		linear-gradient(
			135deg, 
			#fff, 
			#f3f3f3 45%, 
			#ddd 50%, 
			#aaa 50.2%, 
			#bbb 56%, 
			#ccc 62%, 
			#f3f3f3 80%,
			#fff 100%
		);
	box-shadow : 0 0 10px rgba(0, 0, 0, .5);
	transition: all .5s ease;
}
.curl:before,
.curl:after {
	content: '';
	position: absolute;
	z-index: -1;
	left: 12.5%;
	bottom: 5.8%;
	width: 70%;
	max-width: 300px;
	max-height: 100px;
	height: 55%;
	box-shadow: 0 12px 15px rgba(0, 0, 0, .3);
	transform: skew(-10deg) rotate(-6deg);
}
.curl:after {
	left: auto;
	right: 5.8%;
	bottom: auto;
	top: 14.16%;
	transform: skew(-15deg) rotate(-84deg);
}

.curl:hover {
	width: 240px;
	height: 240px;
}
.curl:hover:before,
.curl:hover:after {
	box-shadow: 0 24px 30px rgba(0, 0, 0, .3);
}