JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="a">
    <div class="back"></div>
    <h2>gffwe</h2>
</div>
<div class="b">
    <div class="dv">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui labore eligendi alias exercitationem quisquam, veritatis enim libero amet laboriosam nulla eum molestias nostrum voluptatum, quis possimus excepturi facere iure animi.</div>
    <div class="dv">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione soluta eum alias, ullam necessitatibus unde atque, expedita ex excepturi, assumenda nostrum quisquam magnam veritatis reiciendis! Numquam sed soluta explicabo cumque.</div>
    <div class="dv">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit quaerat doloremque, molestiae quis suscipit, odit pariatur voluptatum ipsam natus ut nam eius eveniet, reprehenderit odio! Esse unde quisquam distinctio cupiditate!</div>
</div>

CSS

div.a {
    padding-top: 30%;
    background: red;
    position: relative;
}
div.a div.back {
    width: 100%;
    height: 20%;
    background: green;
    position: absolute;
    bottom: 0;
}
div.a h2 {
    position: relative;
    z-index: 2;
    padding-left: 40%;
}
div.b {
    font-size: 0px;
    position: relative;
    z-index: 5;
}
div.dv {
    display: inline-block;
    font-size: 16px;
    vertical-align: top;
}
div.dv:nth-child(1){
    width: 40%;
    margin-top: -50%;
}
div.dv:nth-child(2){
    width: calc(60% - 100px);
}
div.dv:nth-child(3){
    width: calc(100px);
}