JSFiddle - React, Tailwind, and code Playground

by Elena Shevchuk

HTML

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

.yellow {
    background: yellow;
    height: 100px;
}
.green {
    background: green;
}
.wrapper {
    overflow: hidden;
    margin: auto;
}
.main {
    border: 1px solid black;
    width: 400px;
    margin: 0 auto;
    padding: 1px 0;
    position: relative;
    background: green;
}
.figure {
    position: absolute;
    width: 200px;
    height: 200px;
    z-index: 2;
    right: -30px;
    background: hsla(100, 40%, 40%, .7);
    bottom: 0;
}