JSFiddle - React, Tailwind, and code Playground

by cheongjin kim

HTML

<div id="wrapper">
	<div id="col1"></div>
	<div id="col2"></div>
</div>

CSS

#wrapper {
width: 400px;
height: 400px;
overflow:hidden;
position:relative;
}
#col1,
#col2 {
position: absolute;
top: -100px;
left: -400px;
display: inline-block;
margin: 0;
padding: 0;
width: 200%;
height: 200%;
-ms-transform: rotate(7deg);
/* IE 9 */
-webkit-transform: rotate(7deg);
/* Chrome, Safari, Opera */
transform: rotate(7deg);
}
#col1 {
background-color: #F24267;
z-index: 1;
}
#col2 {
background-color: #29b9ef;
left: 50%;
z-index: 2;
}