JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="right"></div>
    <div class="wrapper">
        <div class="map">
        </div>
        <div class="content">
            <div class="content_text">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id tempor sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec sed nibh eu nunc luctus pharetra. In sodales non diam et gravida. Sed sem mi, vestibulum vitae condimentum ut, tincidunt in sem. Maecenas nec aliquam nulla. Nam vulputate ut tellus in condimentum. Mauris non sapien risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean facilisis interdum elit sed varius. Etiam dignissim adipiscing tortor, id lobortis tortor semper non. Sed ultrices diam sit amet arcu tempor pellentesque. Vivamus aliquam nisi id iaculis egestas. Maecenas sit amet purus pharetra, rutrum sapien sit amet, semper dui.</p>

            </div>
        </div>
    </div>
</body>

CSS

body {
    margin: 0;
    width: 100%;
    height: 100%;
	background-color: #D3D3D3;
}

.right{
	width: 60%;
	height: 117%;
    position: fixed;
	right: 0px;
}

.wrapper{
	background-color: #7F7F7F;
	height:135%;
	z-index: 4;
	transform:rotate(10deg);
	-ms-transform:rotate(10deg); /* IE 9 */
	-webkit-transform:rotate(10deg); /* Safari and Chrome */
	-webkit-transform-origin: 49% 51%;
	width: 60%;
	margin-left: -130px;
	position: fixed;
	margin-top: -150px;
}

.map{
	height:50%;
	background-color: #696969;
	width: 100%;
	overflow: hidden; 
}

.content{
	height:40%;
	background-color: #474747;
	width: 100%;
	overflow: hidden;
	position: absolute;
    bottom: 0;
}

.content_text{
	transform:rotate(-10deg);
	-ms-transform:rotate(-10deg); /* IE 9 */
	-webkit-transform:rotate(-10deg); /* Safari and Chrome */
	margin: 0;
	padding: 0;
    position: absolute;
    left: 173px;
}


p{
	margin:0px;
	padding:10px 40px;
	font-family: arial;
}