JSFiddle - React, Tailwind, and code Playground

by Felis Catus

HTML

<div class="curl">

</div>

CSS

.curl {
	width:120px;
	height:120px;
	position: absolute;
	top:20px;
	left:200px;
	background-image: linear-gradient(315deg, #fff, #f3f3f3 45%, #ddd 50%, #aaa 50%, #bbb 56%, #ccc 62%, #f3f3f3 80%, #aaa 90%, #aaa 95%, #ddd 100%);
  box-shadow : -5px -5px 10px -6px rgba(0, 0, 0, .5);
	transition: all .5s ease;
  border-radius: 40px 0 0 0;
}
.curl:before,
.curl:after {
	
}
.curl:after {
	content: '';
  position: absolute;
  left: 0;
	top: 0;
	width: 120px;
  height: 100%;
  border-radius: 40px 0 0 0;
  background: white;
  transition: width .5s ease;
  display: block;
  z-index: -1;
}

.curl:hover {
	left: -100px;
}
.curl:hover:after {
  width: 420px;
}