JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<div class="wrapper">
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo obcaecati et fugiat accusantium ab nam tenetur cumque distinctio non inventore libero facere laborum commodi ipsum nesciunt explicabo illum. Possimus quos.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo obcaecati et fugiat accusantium ab nam tenetur cumque distinctio non inventore libero facere laborum commodi ipsum nesciunt explicabo illum. Possimus quos.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo obcaecati et fugiat accusantium ab nam tenetur cumque distinctio non inventore libero facere laborum commodi ipsum nesciunt explicabo illum. Possimus quos.</p>
        
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo obcaecati et fugiat accusantium ab nam tenetur cumque distinctio non inventore libero facere laborum commodi ipsum nesciunt explicabo illum. Possimus quos.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo obcaecati et fugiat accusantium ab nam tenetur cumque distinctio non inventore libero facere laborum commodi ipsum nesciunt explicabo illum. Possimus quos.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo obcaecati et fugiat accusantium ab nam tenetur cumque distinctio non inventore libero facere laborum commodi ipsum nesciunt explicabo illum. Possimus quos.</p>
    </div>

    <i class="color_1"></i>
    <i class="color_2"></i>
    <i class="color_3"></i>
</div>

CSS

.wrapper {
    position: relative;
}
.content {
    position: relative;
    z-index: 2;
    width: 320px;
    margin: 0 auto;
}

[class^="color"] {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 33.33333333%;
}
.color_1 {
    background:red;
}
.color_2 {
    top: 33%;
    
    background: green;
}
.color_3 {
    top:auto;
    bottom: 0;
    height: 34%;
    
    background: blue;
}