JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quisquam ducimus voluptas numquam magni corrupti delectus? Consequatur perspiciatis alias soluta nostrum cupiditate aperiam quo fugiat consectetur eligendi repellat sapiente atque?</p>
    <div class="figure-holder"><div class="figure"></div></div>
</div>

CSS

.main {
    position: relative;
    width: 400px;
    margin: 160px auto;
    background: green;
}
.figure-holder{
    height: 100%;
    left: 0;
    margin: -9999px 0 0;
    overflow: hidden;
    padding:9999px 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.figure {
    position: absolute;
    width: 200px;
    height: 200px;
    right: -30px;
    background: hsla(100, 40%, 40%, .7);
    top: 50%;
    bottom: 0;
    margin-top: -100px;
}