JSFiddle - React, Tailwind, and code Playground

by meg

HTML

<div class="hero hero1">
	<div class="slanted">
        <h2>Some text</h2>
    </div>
</div>	

<div class="hero hero2">
	<div class="slanted hero-text">
        <h2>Some text</h2>
    </div>
</div>	

<div class="hero hero3">
	<div class="slanted hero-text">
        <h2>Some text</h2>
    </div>
</div>

CSS

*{
    margin: 0;
    padding:0;
}
.hero{
    width: 100%;
    position: relative;
    border: 1px solid black;
    background-color: green;
}
.slanted{
    position: relative;
    background-color: purple;
    width: 40%;
    padding: 3em 0 3em 1em;
}
.slanted:after{
    content: '';
    background-color: purple;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -6em;
    width: 20em;
    overflow: visible;
    z-index: 1;
    -webkit-transform: skewX(-13deg);
    -moz-transform: skewX(-13deg);
    -ms-transform: skewX(-13deg);
    -o-transform: skewX(-13deg);
    transform: skewX(-13deg);
}
.slanted h2{
    position: relative;
    z-index:3;
}
.hero1 .slanted{
    width: 30%;
}
.hero2 .slanted{
    width: 20%;
}
.hero3 .slanted{
    width: 10%;
}