JSFiddle - React, Tailwind, and code Playground

by Alex Fogarty

HTML

<div><img src="http://www.alexfogarty.com/alex.jpg" width="500px" height="500px" alt="see alex drink coffee">
    <div class="text">Sample text goes here and it continues on and on and on. Sample text goes here and it continues on and on and on. Sample text goes here and it continues on and on and on. Sample text goes here and it continues on and on and on. Sample text goes here and it continues on and on and on.</div>
</div>

CSS

body {
	padding: 50px;
	
	
	}
div {
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg);
	background:#B27071;
	height: 300px;
	width: 300px;
	position: relative;
	margin-left: 100px;
		overflow: hidden;
	
	
}

div img{
	
	position: absolute;
	top: -70px;
	left: -70px;
	height: 450px;
	width: 450px;
	 -ms-transform: skewX(-20deg); /* IE 9 */
    -webkit-transform: skewX(-20deg); /* Safari */
    transform: skewX(-20deg);
	
	}

.text {
    color: white;
    -ms-transform: skewX(-20deg);
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    z-index: 2;
    position: absolute;
    top: 50px;
    left: -100px;
    background: transparent;
    
}