JSFiddle - React, Tailwind, and code Playground

by spikey

HTML

<div id="contact">
	<div class="wrapper">
		<!-- Form here. -->
		<p>enter some words ok.</p>
		<input type="text" value="" />
	</div>
</div>

CSS

#contact {
	
	margin-top: -1px;
	padding: 1% 20px;
	transform: skewY(-3deg);
	-moz-transform: skewY(-3deg);
	-webkit-transform: skewY(-3deg);
	-ms-transform: skewY(-3deg);
	-o-transform: skewY(-3deg);
	background-color: #74B7B5;
	height: 480px;
	/* overflow-y: hidden; */
}

	#contact > .wrapper {
		transform: skewY(3deg);
		-moz-transform: skewY(3deg);
		-webkit-transform: skewY(3deg);
		-ms-transform: skewY(3deg);
		-o-transform: skewY(3deg);
		width: 80%;
		height: 100%;
		margin: 0 auto;
		overflow: visible;
		text-wrap: normal;
	}

		#contact > .wrapper > p {
			margin-top: 100px;
		}