JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header"></div>
<div class="samples">
	<div class="sample s1">
		<div class="top">
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</div>
	<div class="sample s2">
		<div class="top">
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</div>
	<div class="sample s3">
		<div class="top">
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</div>
	<div class="bottom">
		<div class="left"></div>
		<div class="right"></div>
	</div>
</div>

CSS

html {
	background: #ffc;
}
body {
	margin: 0;
}
.header {
	height: 150px;
	background: #cf9;
}
.samples {
	position: relative;
}
.sample,
.top .left:before,
.top .right:before {
	background-repeat: no-repeat;
}
.sample {
	position: relative;
	height: 100px;
	transition: .5s;
}
.sample:hover {
	height: 300px;
}
.top .left:before,
.top .right:before {
	top: 0;
}
.top,
.bottom {
	position: absolute;
	right: 0;
	left: 0;
}
.top {
	overflow: hidden;
}
.top,
.bottom .left,
.bottom .right {
	bottom: 100%;
	height: 100px;
}
.bottom {
	bottom: 0;
}
.top,
.bottom .left,
.bottom .right {
	pointer-events: none;
}
.top .left,
.top .right,
.bottom .left:before,
.bottom .right:before {
	pointer-events: auto;
}
.top .left,
.top .right,
.bottom .left,
.bottom .right {
	overflow: hidden;
	position: absolute;
}
.top .left:before,
.top .right:before,
.bottom .left:before,
.bottom .right:before {
	content: "";
	position: absolute;
}
.top .left,
.top .right,
.bottom .left:before,
.bottom .right:before {
	height: 70px;
	box-shadow: 0 0 30px rgba(0, 0, 0, .7);
}
.top .left:before,
.top .right:before {
	top: 0;
}
.top .left,
.bottom .left {
	left: 0;
	right: 50%;
}
.top .right,
.bottom .right {
	left: 50%;
	right: 0;
}
.top .left,
.top .right,
.bottom .left,
.bottom .right,
.top .left:before,
.top .right:before,
.bottom .left:before,
.bottom .right:before {
	transform-origin: 0 100%;
}
.top .left,
.top .right,
.top .left:before,
.top .right:before,
.bottom .left:before,
.bottom .right:before {
	bottom: 0;
	transform-origin: 0 100%;
}
.top .left,
.top .right:before,
.bottom .left:before {
	transform: skewX(45deg);
}
.top .right,
.top .left:before,
.bottom .right:before {
	transform: skewX(-45deg);
}
.top .left:before {
	right: -100%;
	left: 0;
}
.top .right:before {
	right: 0;
	left: -100%;
}
.bottom .left:before,
.bottom .right:before {
	right: 0;
	left: 0;
	background: #ffc;
}
.s1,
.s1 .top .left:before,
.s1 .top .right:before {
	background-image:...