Peeking cards

html
<div class="container">
	<div class="wrapper">
		<div class="card1"></div>
		<div class="card2"></div>
	</div>
</div>

<style>
	body {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.container {
		background: #ddd;
		border-radius: 12px;
		padding-left: 20px;
		padding-right: 20px;
		display: flex;
		position: relative;
		height: 160px;
		clip-path: inset(-50% 0% 0% -50%);
	}

	.wrapper {
		position: relative;
		display: flex;
		transform: translate(-4px, -12px);
	}

	.card1 {
		background: white;
		border-radius: 12px;
		box-shadow:
			0px 0.9px 4px rgba(0, 0, 0, 0.12),
			0px 2.1px 9.5px rgba(0, 0, 0, 0.12),
			inset 0px 0px 0px -1px rgba(0, 0, 0, 0.16);
		width: 200px;
		height: 200px;
		transform: rotate(-6deg) translateX(-12px);
	}

	.card2 {
		background: white;
		border-radius: 12px;
		box-shadow:
			0px 0.9px 4px rgba(0, 0, 0, 0.12),
			0px 2.1px 9.5px rgba(0, 0, 0, 0.12),
			inset 0px 0px 0px -1px rgba(0, 0, 0, 0.16);
		width: 200px;
		height: 200px;
		position: absolute;
	}
</style>