JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main"></div>
<footer>
		<div class="footer-info">
			<span>Company Ltd</span>
			<span class="tel">Tel: 132 - 231 24 43</span>
		</div>
	</footer>

CSS

.main {
    height: 50px;
    background-color: #d6d6d6;
    margin-bottom: 50px;
    position: relative;
}

.main:after, footer:before {
    content: " ";
    width: 100%;
    height: 40px;
    background: inherit;
    position: absolute;
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
    -o-transform: rotate(-1deg);
    -ms-transform: rotate(-1deg);
    transform: rotate(-1deg);
    z-index: -1;
}

.main:after {
    bottom: -20px;
}

footer:before {
    top: -20px;
}

footer {
	height: 93px;
	background-color: #ff6138;
	position: relative;
}





.footer-info {
	position: absolute;
	bottom: 27px;
	left: 33px;
}

footer span {
	color: #ffff9d;
	text-transform: uppercase;
	font-weight: 300;
	letter-spacing: 0.05em;
	font-size: 1.1875em;
}

footer .tel {
	color: #fff;
	font-weight: 400;
	font-size: 1em;
	margin-left: 24px;
}

body {
    background-color: #ff9200;
}