JSFiddle - React, Tailwind, and code Playground

by Paulpro

HTML

<div class="activity" style="height: 200px;">
    <div class="activity overlap" style="position: aboslute; background-color: #F22; height: 30px; z-index: 1"></div>
    <div style="z-index: 2">
        I want to see this text!
    </div>
</div>

CSS

.activity{
    background-color: #68D;
    position: absolute;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    width: 90%;
    color: #FFF;
}

.activity.overlap{
    position: aboslute;
    width: 100%;
    background-color: #F22;
}