JSFiddle - React, Tailwind, and code Playground

by GMK Hussain

HTML

<h2>Skew Div and Normal Content</h2>

<div>
    <img src="https://m1.behance.net/rendition/modules/141809605/disp/196eadbeaa018929ac45c0691961e231.jpg" />
</div>

<div>
    <p>Hello</p>
    <img src="https://m1.behance.net/rendition/modules/114431943/disp/1b4410eaabba86b3954e971a99cf2caa.jpg" />
</div>


<div>
    <img src="https://m1.behance.net/rendition/modules/141809605/disp/196eadbeaa018929ac45c0691961e231.jpg" />
</div>

CSS

div{
transform: matrix(1, 0, -0.17632, 0.99999, 0, 0); width: 30%;
    float:left;
    overflow:hidden;
    text-align:center;
    }

div * {
 height:100%;
    float:none;
    margin:0 auto;
    transform: matrix(1, 0, 0.17632, 1, 0, 0);
}