JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
<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"></div>
</div>
</div>

CSS

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