JSFiddle - React, Tailwind, and code Playground

by Ed Bulikyan

HTML

<div class="c1"><div class="content">c1</div></div>
<div class="c2"><div class="content">c2</div></div>
<div class="c3"><div class="content">c3</div></div>

SCSS

.c1, .c2, .c3 {
	overflow: hidden;
	transform: skewY(-3deg);
	
	&:not(:last-child) {
		margin-bottom: 20px;
	}
}

.content {
	padding: 50px;
	margin-top: -20px;
	margin-bottom: -20px;
	transform: skewY(3deg);
}

.c1 .content {
	background-color: lightgreen;
}

.c2 .content {
	background-color: violet;
}
.c3 .content {
	background-color: gold;
}